AngularJs之指令与控制器之间的交互
2018-08-23 本文已影响1人
b08d45cdf2ac
指令（directive）是AngularJS核心模块之一，可以实现很多强大的功能，那么指令和多控制器之间的交互是如何实现的呢？请花费两分钟阅读下文！
Angularjs
站内文章“指令的三个阶段”中提到，大部分时候我们只需要编写link函数，其中包括DOM操作、时间绑定、函数调用等。
一、指令复用时调用控制器的方法
1. HTML
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div ng-controller="MyCtrl">
<loader howToLoad="loadData()">滑动加载</loader>
</div>
<div ng-controller="MyCtrl2">
<loader howToLoad="loadData2()">滑动加载</loader>
</div>
</body>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js" ></script>
</html>
这里定义angualrjs应用MyModule，在不同的控制器使用自定义指令loader，指令里面定义属性howToLoad，属性值为控制器里面函数的调用。
2. javascript
var myModule = angular.module("MyModule", []);
myModule.controller('MyCtrl',['$scope', function($scope){
$scope.loadData = function(){
console.log("加载数据中...");
};
}]);
myModule.controller('MyCtrl2',['$scope', function($scope){
$scope.loadData2 = function(){
console.log("加载数据中222...");
};
}]);
myModule.directive("loader",function(){
return {
restrict: "AE",
link: function(scope, element, attrs){
element.bind("mouseenter", function(event){
scope.$apply(attrs.howtoload); //转换成小写
})
}
}
})
分别在不同的控制器定义不同函数，在指令的link函数中绑定鼠标事件，传入自定义指令的属性值，调用对应的函数。
3. 归纳：
自定义指令和多控制器交互，主要是通过复用指令时传入不同的属性值（不同的函数），在指令的link函数中调用实现的，注意link函数中取自定义属性会被转成小写。
二、指令与控制器之间的数据绑定
1. scope的三种绑定方式：
| 类型 | 描述 |
|---|---|
| @ | 把当前属性作为字符串传递。你还可以绑定来自外层scope的值，在属性值中插入{{ }}即可 |
| = | 与父scope中的属性进行双向绑定 |
| & | 传递一个来自父scope的函数，稍后调用 |
2. @绑定方式
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="js/myController.js" ></script>
</head>
<body>
<div class="" ng-controller="MyCtrl">
<drink flavor="{{ctrlFlavor}}"></drink>
</div>
</body>
</html>
var myModule = angular.module("MyModule",[]);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function(){
return {
restrict: 'AE',
scope: {
flavor: '@'
},
template: "<div>{{flavor}}</div>"
// ,
// link: function(scope, element, attrs){
// scope.flavor = attrs.flavor;
// }
}
});
自定义指令的flavor属性值用{{ }}表达式，给指令的scope绑定对应的@符号，可以代替link函数中的重新赋值。
3. =绑定方式
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="js/myController.js" ></script>
</head>
<body>
<div class="" ng-controller="MyCtrl">
控制器：
<br />
<input type="text" ng-model="ctrlFlavor" />
<br />
指令：
<br />
<drink flavor="ctrlFlavor"></drink>
</div>
</body>
</html>
var myModule = angular.module("MyModule",[]);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.ctrlFlavor="百威";
}])
myModule.directive("drink", function(){
return {
restrict: 'AE',
scope: {
flavor: '='
},
template: '<input type="text" ng-model="flavor" />'
}
});
控制器的input绑定控制器的ctrlFlavor数据，指令template的input绑定指令域的flavor属性，通过=符号实现数据的双向绑定。
4. &绑定方式
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8" />
<title></title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="js/myController.js" ></script>
</head>
<body>
<div class="" ng-controller="MyCtrl">
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
<greeting greet="sayHello(name)"></greeting>
</div>
</body>
</html>
var myModule = angular.module("MyModule",[]);
myModule.controller('MyCtrl', ['$scope', function($scope){
$scope.sayHello = function(name){
alert("Hello "+name);
};
}])
myModule.directive("greeting", function(){
return {
restrict: 'AE',
scope: {
greet: '&'
},
template: '<input type="text" ng-model="userName" />' +
'<button class="btn btn-default" ng-click="greet({name:userName})">问候</button><br />'
}
});
自定义指令的greet属性绑定了控制器的sayHello方法，传入name值，自定义指令中input绑定用户输入的数据userName，通过ng-click事件调用greet属性传过来的值。
