angularJS中controller与directive双向通信
一次工作中的机会，需要用到angularJS中控制器调用指令中的方法，于是把angularJS控制器与指令的通讯深入研究了一下，记载在此。
首先我们来看一下怎么在directive中调用controller的方法：
Index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Angular Directive Call Controller Function</title> <script src="angular-1.3.0.js"></script> </head> <body ng-app="myApp"> <h1>Angular Directive Call Controller Function</h1> <div ng-controller="myController"> <my-directive on-button-click="directiveButtonClicked()" /> </div> <script src="script.js"></script> </body> </html>
Script.js：
var app = angular.module("myApp", []);
app.controller("myController", function($scope) {
$scope.directiveButtonClicked = function() {
// Controller reacting to call initiated by directive
alert('Button was clicked in directive');
}
});
app.directive("myDirective", function() {
return {
restrict: 'E',
template: '<button ng-click="buttonClicked();">Click Me</button>',
scope: {
onButtonClick: '&'
},
link: link
};
function link(scope, element, attrs, controller) {
scope.buttonClicked = function() {
// Button was clicked in the directive
// Invoke callback function on the controller
scope.onButtonClick();
}
}
});
首先，在controller中，有一个directiveButtonClicked方法，这个方法在点击button的时候被调用，而这个button则是出现在directive中的。其实仔细看代码就知道，这个方法是通过属性传给了directive，所以这个通讯其实没有什么特别的。
但是在controller中调用directive的方法就没这么简单了。看代码：
Index.html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Angular Controller Call Directive Function</title> <script src="angular-1.3.0.js"></script> </head> <body ng-app="myApp"> <h1>Angular Controller Call Directive Function</h1> <div ng-controller="myController"> <my-directive accessor="accessor" ></my-directive> <button ng-click="callDirective();">Get Data</button> </div> <script src="script.js"></script> </body> </html>
Script.js：
var app = angular.module("myApp", []);
app.controller("myController", function($scope) {
$scope.accessor = {};
$scope.callDirective = function() {
if($scope.accessor.getData) {
var data = $scope.accessor.getData();
alert('Data from directive: ' + JSON.stringify(data));
}
}
});
app.directive("myDirective", function() {
return {
restrict: 'E',
template: 'Name: <input type="text" ng-model="name" /><br />Credit: <input type="text" ng-model="credit" /><br />',
scope: {
accessor: '='
},
link: link
};
function link(scope, element, attrs, controller) {
if(scope.accessor) {
scope.accessor.getData = function() {
return {
name: scope.name,
credit: scope.credit
}
}
}
}
});
仔细看代码，其实在directive中有一个叫做accessor的属性，而它正是controller中的东西，相当于在directive中开了一个口子，然后把controller的一个东西注入进去了，这样，controller就能够调用directive中的任何东西了。
这两个例子相信在今后的工作中对我会有非常大的帮助。
什么时候开始都不晚，晚的是，你总是不敢开始。
