有些时候我们需要directive生成api，可以在其他地方(controller)调用
下面介绍下简单的步骤：
使用directive的双向绑定绑定controller里的变量
html:
<div expose="exposedApi"></div>
js:
directive('expose',function(){
return {
restrict: "A",
scope: {
api: "=expose"
}
};
这个时候controller离的exposedApi变量和directive里的api是双向绑定的
给directive里的api增加可调用的方法
directive('expose',function(){
return {
restrict: "A",
scope: {
api: "=expose"
},
controller: function($scope){
$scope.number = 0;
$scope.api={
count:function(){
$scope.number ++;
}
};
},
template: '<div class="well">' +
'<p>count: {{number}}</p>' +
'</div>'
};
调用directive里的方法
controller("ctrl",function($scope){
$scope.count = function(){
$scope.exposedApi.count();
};
})
Demo:
http://shengoo.github.io/angularjs-practice
完整代码：
<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
<script src="../bower_components/angular/angular.js"></script>
</head>
<body ng-controller="ctrl">
<div class="container">
<div expose="exposedApi"></div>
<a ng-click="count()" class="btn btn-primary">click</a>
<div expose="exposedApi2"></div>
<a ng-click="count2()" class="btn btn-primary">click</a>
</div>
<script>
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.count = function(){
$scope.exposedApi.count();
};
$scope.count2 = function(){
$scope.exposedApi2.count();
};
})
.directive('expose',function(){
return {
restrict: "A",
scope: {
api: "=expose"
},
controller: function($scope){
$scope.number = 0;
$scope.api={
count:function(){
$scope.number ++;
}
};
},
template: '<div class="well">' +
'<p>count: {{number}}</p>' +
'</div>'
};
})
</script>
</body>
</html>