English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Введение в тему
Этот пример взят из видео, в котором есть动感超人 с тремя способностями: сила strength, скорость speed, свечение light.
Эти три способности как три свойства, определяющие动感超人 как тег, позволяют получить эту способность, добавив соответствующие свойства.
Для удобства отображения результатов к тегу добавлен ответ на события мыши, при перемещении мыши на соответствующий тег будет вызван метод, который напечатает способности.
Анализ программы
Код html-части следующий:
<div>
<superman>nothing!</superman>
<superman strength >strength!</superman>
<superman strength speed >strength speed!</superman>
<superman strength speed light >strength speed light!</superman>
</div>
Давайте посмотрим, как это можно реализовать, сперва создадим модуль:
var myAppModule = angular.module("myApp",[]);
На основе этого модуля создадим тег superman, как и раньше.
myAppModule.directive("superman",function() {
return{
scope:{},
restrict:'AE',
transclude:true,
template:"<div><div ng-transclude></div></div>",
controller:function($scope) {
$scope.abilities = [];
this.addStrength = function() {
$scope.abilities.push("strength");
};
this.addSpeed = function() {
$scope.abilities.push("speed");
};
this.addLight = function() {
$scope.abilities.push("light");
};
,
link:function(scope,element,attr){
element.bind("mouseenter",function(){
console.log(scope.abilities);
});
}
}
});
Здесь разница в том, что в методе есть свойство controller, это не такой контроллер, как ng-controller, а это интерфейс, открытый для использования инструкцией, методы в котором могут использоваться внешне как公开емые методы, другие инструкции могут использовать эти методы через зависимости.
Далее создадим инструкции для трех соответствующих способностей.
myAppModule.directive("strength",function(){
return{
require:'^superman',
link:function(scope,element,attr,supermanCtrl){
supermanCtrl.addStrength();
}
}
});
myAppModule.directive("speed",function(){
return{
require:'^superman',
link:function(scope,element,attr,supermanCtrl){
supermanCtrl.addSpeed();
}
}
});
myAppModule.directive("light",function(){
return{
require:'^superman',
link:function(scope,element,attr,supermanCtrl){
supermanCtrl.addLight();
}
}
});
Код всех трех инструкций примерно одинаковый, где require указывает на зависимые инструкции.
В link добавлен параметр supermanCtrl, который, по моему предположению, это controller в superman, поэтому命名 был выбран в виде superman+Ctrl.
Поскольку не понимаю внутренних принципов, это всего лишь предположение, но экспериментальным путем доказано, что если изменить имя этого параметра, то будет выдаваться ошибка.
Указав эти три инструкции, их можно использовать как свойства super, и при указании этого свойства будет вызываться метод внутри link, вызывая методы,公开 в superman.
В общем, процесс взаимодействия директив:
1 Сначала создать базовую директиву, добавить公开ые методы в свойстве controller
2 Создать другие интерактивные директивы, добавить соответствующие зависимости директивы в свойстве require; вызвать公开ые методы в свойстве link
Все программный код:
<!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>nothing!</superman>
<superman strength >strength!</superman>
<superman strength speed >strength speed!</superman>
<superman strength speed light >strength speed light!</superman>
</div>
<script type="text/javascript">
var myAppModule = angular.module("myApp",[]);
myAppModule.directive("superman",function() {
return{
scope:{},
restrict:'AE',
transclude:true,
template:"<div><div ng-transclude></div></div>",
controller:function($scope) {
$scope.abilities = [];
this.addStrength = function() {
$scope.abilities.push("strength");
};
this.addSpeed = function() {
$scope.abilities.push("speed");
};
this.addLight = function() {
$scope.abilities.push("light");
};
,
link:function(scope,element,attr){
element.bind("mouseenter",function(){
console.log(scope.abilities);
});
}
}
});
myAppModule.directive("strength",function(){
return{
require:'^superman',
link:function(scope,element,attr,supermanCtrl){
supermanCtrl.addStrength();
}
}
});
myAppModule.directive("speed",function(){
return{
require:'^superman',
link:function(scope,element,attr,supermanCtrl){
supermanCtrl.addSpeed();
}
}
});
myAppModule.directive("light",function(){
return{
require:'^superman',
link:function(scope,element,attr,supermanCtrl){
supermanCtrl.addLight();
}
}
});
</script>
</body>
</html>
Результат выполнения:
Вот собранные материалы о взаимодействии инструкций AngularJS. В будущем продолжим добавлять соответствующие материалы, спасибо за поддержку нашего сайта!
Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями Интернета, самостоятельно загружен, сайт не имеет права собственности, не был обработан вручную и не несет ответственности за связанные с этим法律责任. Если вы обнаружите подозрительное содержимое, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма замените # на @) для сообщения о нарушении и предоставьте соответствующие доказательства. При подтверждении правонарушения сайт немедленно удалят подозрительное содержимое.