指令的交互

来源：互联网发布：java hashmap stream 编辑：程序博客网时间：2024/06/06 11:40

1.指令与指令间的交互

例：<body ng-app="MyModule">
<div class="row">
<div class="col-md-3">
<superman strength>动感超人---力量</superman>
</div>
<div class="col-md-3">
<superman strength speed>动感超人2---力量+敏捷</superman>
</div>
<div class="col-md-3">
<superman strength speed light>动感超人3---力量+敏捷+发光</superman>
</div>
</div>

</body>

js部分：

myModule.directive('superman',function(){
return{
scope:{},
restrict:'AE',
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,attrs){
element.addClass('btn btn-primary');
element.bind('mouseenter',function(){
console.log(scope.abilities);
})
}
}
});
myModule.directive('strength',function(){
return{
require:'^superman',
link:function(scope,element,attr,supermanCtl){
supermanCtl.addStrength();
}

}
})
myModule.directive('speed',function(){
return{
require:'^superman',
link:function(scope,element,attr,supermanCtl){
supermanCtl.addSpeed();
}
}
})

myModule.directive('light',function(){
return{
require:'^superman',
link:function(scope,element,attr,supermanCtl){
supermanCtl.addLight();
}
}
})
</script>

最主要的就是 superman的这个指令，里面有些我们还没有认识的元素，我们下面介绍下：

scope:{}这个是创建一个独立的作用域。
controller，这个和我们angular中的控制器有些不同，这个主要是写一些指令的对外方法。

在这三个控制器也有新增的东西：

require:"^superman"，这个是告诉angularJS,当前的指令，依赖于哪个指令。我们现在的 strength指令依赖于superman的指令
link方法中的第四个参数，叫做父控制器，只要是指令写了require参数，就可以使用这个参数了，它可以访问父级contorller的方法中提供的一些属性和方法。

controller（字符串或函数）：controller参数可以是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字，来查找注册在应用中

的控制器的构造函数。

控制器中也有一些特殊的服务可以被注入到指令当中。这些服务有：

1. $scope
与指令元素相关联的当前作用域。
2. $element
当前指令对应的元素。
3. $attrs
由当前元素的属性组成的对象。例如，下面的元素：
<div id="aDiv"class="box"></div>
具有如下的属性对象：
{
id: "aDiv",
class: "box"
}

require（字符串或数组）：require参数可以被设置为字符串或数组，字符串代表另外一个指令的名字。require会将控
制器注入到其值所指定的指令中，并作为当前指令的链接函数的第四个参数。

? 如果在当前指令中没有找到所需要的控制器，会将null作为传给link函数的第四个参数。
^ 如果添加了^前缀，指令会在上游的指令链中查找require参数所指定的控制器。
?^ 将前面两个选项的行为组合起来，我们可选择地加载需要的指令并在父指令链中进行查找。
没有前缀如果没有前缀，指令将会在自身所提供的控制器中进行查找，如果没有找到任何控制器（或具有指定名字的指令）就抛出一个错误。

总结：在controller里边写业务逻辑（我们明白业务逻辑大多数是放在服务中的）这里所说的业务逻辑乃是为呈现视图之前而准备的数据或是与其他指令交互的api；

link函数主要是操作dom（监听事件）；

2.指令与控制器交互：

例：

<div ng-controller="MyCtrl2">
<loader howToLoad="loadData2()">滑动加载</loader>
</div>
</body>

myModule.controller('MyCtrl2', ['$scope', function($scope){
$scope.loadData2=function(){
console.log("加载数据中...22222");
}
}]);
//在模块下挂载一个loader指令
myModule.directive("loader", function() {
return {
restrict:"AE",//Element,Attribute
link:function(scope,element,attrs){
element.bind('mouseover', function(event) {
//scope.loadData();
// scope.$apply("loadData()");
// 注意这里的坑，howToLoad会被转换成小写的howtoload
scope.$apply(attrs.howtoload);
//其中scope为POJO，但是有一系列的工具方法如$watch,$apply等
});
}
}
});
</script>

很显然这里有两个控制器，分别为MyCtrl和MyCtrl2，我们的指令如何知道调用那一个Controller?这时候我们就需要为我们的指令指定

不同的属性，用这个属性来判断不同的controller调用，这样我们的指令就可以在不同的controller中调用了!

总结：之所以定义指令就是为了复用，为了让指令和不同的控制器进行交互就会为指令定义不同的配置项，这就是指令和控制器进行数据交互的原理之所在!

0 0