前言:
前段时间我们学习了angular的指令,他通过ECMA的方式创建元素,可以让我们共用这些元素,我们也知道可以通过 link的方法给这个指令添加一些动作事件,本节,我们将写入和让angular的指令能和控制器进行交互,
AngularJs指令和控制器交互
。1,指令和控制器的交互
上面的代码平淡无奇,有个控制器有个指令(loader),下面可以看到我们通过 directive创建了这个指令,并且我们通过link的方法给他赋值鼠标事件(mouseenter)。
var myModule = angular.module('MyController',[]);
myModule.controller('MyCtrl',function($scope){
$scope.loadData = function(){
console.log("加载数据...");
}
})
myModule.directive('loader',function(){
return{
restrict:'AE',
link:function(scope,element,attr){
element.bind('mouseenter',function(){
scope.loadData();
})
}
}
})
我们来看看运行的结果,ok,我们打印出来 ”加载数据...“。
2,多个控制器如何公用一个指令?
我们创建指令的目的就是在于,能够复用它,当然这也是MVC的终极思想。
我们的代码也发生了一些变化
首先,我们创建了两个控制器 MyCtr1 和 MyCtr2,同时呢,我们给 loader 这个指令,加了一个自定义的属性叫 loadDataFn,给他赋的值是下面js中的两个对应控制器中的方法loadData()和loadData2();
var myModule = angular.module('MyController',[]);
myModule.controller('MyCtrl',function($scope){
$scope.loadData = function(){
console.log("加载数据...");
}
})
myModule.controller('MyCtr2',function($scope){
$scope.loadData2 = function(){
console.log("加载数据2...");
}
})
myModule.directive('loader',function(){
return{
restrict:'AE',
link:function(scope,element,attr){
element.bind('mouseenter',function(){
// scope.loadData();
// scope.$apply("loadData()");
scope.$apply(attr.loaddatafn);
})
}
}
})
当然,在指令的 link方法中我们也做了改变,link方法呢,给我提供了四个参数:scope、element、attr和父控制器,