AngularJS指令的交互
2017-05-23 本文已影响0人
RelaxedAndHappy
指令与单个控制器的交互：
<body ng-app="myApp">
<div ng-controller="myCtrl">
<hello>滑动加载</hello>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
//添加控制器
app.controller("myCtrl", function($scope) {
$scope.loadData = function() {
console.log("滑动加载成功")
};
});
//添加自定义指令
app.directive("hello", function() {
return {
restrict: "AE",//属性和元素方式调用指令
link: function(scope, element, attrs) {
element.bind("mouseenter" ,function() {
scope.loadData();
});
}
}
});
</script>
</body>
指令和多个控制交互：
<body ng-app="myApp">
<div ng-controller="myCtrl">
<hello howToLoad="loadData()">滑动加载</hello>
</div>
<div ng-controller="myCtrl2">
<hello howToLoad="loadData2()">滑动加载22222</hello>
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
//添加控制器
app.controller("myCtrl", function($scope) {
$scope.loadData = function() {
console.log("滑动加载成功")
};
});
app.controller("myCtrl2", function($scope) {
$scope.loadData2 = function() {
console.log("22222加载成功")
};
});
//添加自定义指令
app.directive("hello", function() {
return {
restrict: "AE",//属性和元素方式调用指令
link: function(scope, element, attrs) {
element.bind("mouseenter" ,function() {
// scope.loadData();
// 使用$apply()方法，通过控制器的属性值来控制加载那个方法
scope.$apply(attrs.howtoload);//注意这里的属性名写小写即可，不能有存在大小写，系统已经转换过了
});
}
}
});
</script>
</body>
指令与指令间的交互：
<body ng-app="myApp">
<div>
<superman strength>动感超人 ---- 力量</superman>
</div>
<div>
<superman strength speed>动感超人 ---- 力量+速度</superman>
</div>
<div>
<superman strength speed light>动感超人 ---- 力量+速度+光</superman>
</div>
<script>
var app = angular.module("myApp", []);
//自定义指令
app.directive("superman", function() {
return {
scope: {},//创建独立作用域
restrict: 'AE',
controller: function($scope) {//用于暴露给外部调用的方法
$scope.abilites = [];
this.addStrength = function() {
$scope.abilites.push("strength");
};
this.addSpeed = function() {
$scope.abilites.push("speed");
};
this.addLight = function() {
$scope.abilites.push("light");
};
},
//需要暴露给外部调用时，把函数在controller里
//link用于处理函数，绑定事件
link: function(scope, element, attrs) {
element.bind("mouseenter", function() {
console.log(scope.abilites)
});
}
};
});
// 给属性添加指令
app.directive("strength", function() {
return {
require: "^superman",//表示该指令依赖的对象,require存在时，就可以使用link的第四个参数Ctrl
link: function(scope, element, attrs, supermanCtrl) {
supermanCtrl.addStrength();
}
}
});
app.directive("speed", function() {
return {
require: "^superman",
link: function(scope, element, attrs, supermanCtrl) {
supermanCtrl.addSpeed();
}
}
});
app.directive("light", function() {
return {
require: "^superman",
link: function(scope, element, attrs, supermanCtrl) {
supermanCtrl.addLight();
}
}
});
</script>
解释：
1.自定义指令下的link函数有四个参数：scope，element，attrs和ctrl(关联ctrl)
2.require：请求另外的controller，传入当前directive的link 函数中。require需要传入一个directive controller的名称。如果找不到这个名称对应的controller，那么将会抛出一个error。名称可以加入以下前缀：
? - 不要抛出异常。这使这个依赖变为一个可选
^ - 允许查找父元素的controller
3.在上面的示例中<superman></superman>指令中添加的strength speed light其实也是指令，是以属性的方式存在的。
4.scope:{}这个是创建一个独立的作用域。
5.controller，这个和我们angular中的控制器有些不同，这个主要是写一些指令的对外方法。
