这一节我们来说一下controller这个参数
一.指令控制器的配置方法:
对于指令我有两种配置路由的方式:1.在html中直接引用,2,在指令的controller参数里定义
第一种:在html中直接引用
我定义一个controller:其中newsApp为我自定义的app模块。
js:controller
var newsApp=angular.module('newsApp',{});
newsApp.controller('ForDirective', function() {
alert("this is a directive controller");
});
js:directive
newsApp.directive('helloDirective', function() {
return { }
});
html
<section>
<div hello-directive ng-controller="ForDirective"></div>
</section>
这种方式大家都很熟悉
第二种:在指令的controller参数里定义
可取值:string或者function
该controller可以是已经定义在app上的一个controller,比如:{controller:'ForDirective'}
也可以是匿名函数,及:{controller:function(){}}
该controller是对所有其他指令共享的,自定义的其他指定均可以调用其中的一些方法
还是刚刚的例子,我切换为在指令里设置controller
js:directive
newsApp.directive('helloDirective', function() {
return {
controller:'ForDirective'
}
});
或者:
newsApp.directive('helloDirective', function() {
return {
controller: function() {
alert("this is a directive controller");
}
}
});
html:
<section>
<div hello-directive></div>
</section>
二.指令控制器的常用依赖服务
指令控制器,可以注入任意可以被注入的ng服务。我们介绍一些服务来了解下他们的作用
1.$scope
指令当前作用域
2.$attrs
指令作用Dom元素的属性集合对象
这个属性集其实就是把元素的属性和值封装为一个json对象:{id:'obj',name:'myname'}
3.$element
指定作用的Dom元素
可以理解为jquery里面的$('#id')
4.$transclude
在使用该嵌入链接函数时,一定要先将transclude参数设置为true,不然$transclude会为undefind
我们看一个例子:
js:directive
newsApp.directive('helloDirective', function() {
return {
transclude: true,
controller: function($element, $transclude) {
$transclude(function(clone) {
$element.append(clone);
});
}
}
});
html
<section>
<div hello-directive>
这是原先的内容
</div>
</section>
运行效果:
查看源码:
我们没有在指令模板里加入带 ng-transclude的元素,但是 原先的内容依旧输出,
我们来分析一下:
首先,参数transclude:true,就是告知要嵌入以前的内容,这样 指令作用的dom元素就被clone了一份保留下来,保留在$transclude的回掉函数的参数clone里面,clone这个实体就是被保留的元素。
我们在controller里面又将其添加到页面中,于是实现了那种效果
对$scope,$element,$attrs,$transclude的综合应用能使我们自定义指令做成很方便我们使用的组件