Фоновое введение
Этот пример является примером в видео, есть динамичный Супермен, с тремя способностями, прочностью, скоростью скорости, светящимся светом.
Эти три способности используются в качестве трех атрибутов и определяют динамический Супермен как тег. Вы можете обладать этой способностью, добавив соответствующие атрибуты.
Чтобы облегчить отображение результатов, добавьте событие ответа мыши в тег. Когда мышь перемещается к соответствующему тегу, будет запускается метод для распечатки возможностей, которые она имеет.
Программный анализ
Код для HTML -части заключается в следующем:
<div> <Супермен> ничего! </superman> <Сила Супермена> Сила! </Супермен> <Скорость силы Супермена> Скорость силы! </Супермен> <Супермен Силы Скорость Скорость> Скорость силы! </Супермен> </div>
Давайте посмотрим, как его реализовать. Первое - создать модуль:
var myAppmodule = angular.module ("myApp", []);
На основе этого модуля создайте TAG Superman, аналогичный предыдущему.
myAppModule.directive ("superman", function () {return {scope: {}, ограничение: 'ae', translate: true, template: "<div> <div ng-transclude> </div> </div>", Controller: function ($ scope) {$ scope.abitials = []; $ scope.push.push ("Сила"); console.log (scope.ability);Разница здесь в том, что внутри метода есть атрибут контроллера. Это не тот контроллер, как NG-контроллер, а интерфейс для открытия инструкций для снаружи. Методы, объявленные в нем, могут использоваться внешне в качестве публичных методов, а другие инструкции могут использовать эти методы с помощью зависимостей.
Далее создайте три команды, соответствующие возможностям
myAppModule.directive ("infort", function () {return {reteply: '^superman', link: function (scope, element, attr, supermanctrl) {supermanctrl.addstrength ();}}}); myAppModule.directive ("speed", function () {return {retempt: '^superman', link: function (scope, element, attr, supermanctrl) {supermanctrl.addspeed ();}}}); myAppModule.directive ("light", function () {return {retempt: '^superman', link: function (scope, element, attr, supermanctrl) {supermanctrl.addlight ();}}});Коды трех инструкций практически одинаковы, где требование указывает зависимые инструкции.
В ссылке есть дополнительный параметр Supermanctrl. Этот параметр предполагается, как контроллер в Супермене, поэтому метод именования - Супермен+Ctrl.
[Поскольку я не понимаю внутренних принципов, это просто предположение, но эксперименты доказали, что если имя этого параметра будет изменен, будет сообщена ошибка. 】
После объявления этих трех инструкций вы можете использовать эти три инструкции в качестве супер -атрибутов. Когда этот атрибут будет указан, внутренний метод внутри ссылки будет запускается, и будут вызваны методы, раскрытые в Супермене.
Подводя итог, интерактивный процесс инструкций:
1 Сначала создайте базовую директиву, а после атрибута контроллера добавьте метод, раскрытый общественности.
2 Создайте другие интерактивные инструкции, добавьте соответствующую зависимость инструкции после атрибута «Восставление»; вызовите метод разоблачения в ссылке
Все программные коды:
<! Doctype html> <html ng-app = "myApp"> <Head> <meta http- Equiv = "content-type" content = "text /html; charset = utf-8" /> <script src = "http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"> </script> </head> <body> <div> <Супермен> Ничего! </Супермен> <Суперман Сила> Сила! </superman> <Суперман Сила> Сила Сила! </Superman> <Суперман Сила> Сила! Speep! > Скорость силы! </superman> </div> <script type = "text/javascript"> var myappmodule = angular.module ("myApp", []); myAppModule.directive ("superman", function () {return {scope: {}, ограничение: 'ae', translate: true, template: "<div> <div ng-transclude> </div> </div>", Controller: function ($ scope) {$ scope.abitials = []; $ scope.push.push ("Сила"); console.log (scope.ability); myAppModule.directive ("infort", function () {return {reteply: '^superman', link: function (scope, element, attr, supermanctrl) {supermanctrl.addstrength ();}}}); myAppModule.directive ("speed", function () {return {retempt: '^superman', link: function (scope, element, attr, supermanctrl) {supermanctrl.addspeed ();}}}); myAppModule.directive ("light", function () {return {retempt: '^superman', link: function (scope, element, attr, supermanctrl) {supermanctrl.addlight ();}}}); </script> </body> </html>Результаты работы:
Выше приведено информация об взаимодействии инструкций AngularJS. Мы будем продолжать добавлять соответствующую информацию в будущем. Спасибо за поддержку этого сайта!