Angular（二）

angular指令Directive

$sce控制代码安全检查

为什么要要$sce？因为AngularJS里很多地方，比如路径默认是个字符串，不会认为是路径，从而访问不到我们需要的东西，那么我们就可以通过$sce告诉angualr这个路径，这样是很安全的。它有以下几种方法：

$sce.trustAs(type,name);
$sce.trustAsUrl(value);
$sce.trustAsHtml(value);
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);

ng-bind-html 这里只能放字符串类型的,需要将数据html编译成$sce.trustAsHtml(html)

directive指令

directive(指令)是AngularJ非常强大功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性，并且还可以在它的基础上来操作scope、绑定事件、更改样式等。通过这个Directive，我们可以封装很多公共指令，比如分页指令、自动补全指令等等。然后在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。
指令分为两类: 自带指令自定义指令
自定义指令:
装饰型指令赋予标签一些功能 link函数
组件式指令把对应标签替换成一个组件 template

directive定义与用法

app.directive('panel',function () {
    return {
        restrict:'EA',   
        replace:false,
        template:`Hello
zfpx`,
        templateUrl:`tmpl/panel.html`,   
        link:function (scope,element,attrs) {//element即对应的元素，attrs为该元素上的自定义属性的集合
            //
            scope.name = attrs.st;
            scope.title = attrs.title;
        },
        scope:{}, 
        transclude:true
    }
});

directive指令详解：

restrict:（字符串）限制使用范围,取值有：E(元素),A(属性),C(类),M(注释)，默认范围是'EA',范围的标识必须大写

replace:(布尔值)默认值为false，设置为true时候，将指令对应的标签元素替换掉，要求模板只能有一个根节点
template：(字符串)，一段HTML文本，用于替换或添加对用元素的模板
templateUrl：(字符串)，一个代表HTML文件路径的字符串，通过ajax获取过来的
scope：默认值是false。

true表示继承父作用域，并创建自己的作用域（子作用域）
{}表示创建一个全新的隔离作用域，不能继承父级作用域

link:function link(scope, element, attrs, controller) { ... }

链接函数负责注册DOM事件和更新DOM。它是在模板被克隆之后执行的，它也是大部分指令逻辑代码编写的地方。
scope - 指令需要监听的作用域,自己家没有作用域 scope为根作用域，如果自己家有 scope就是自己家的作用域
element - instance element - 指令所在的元素。只有在postLink函数中对元素的子元素进行操作才是安全的，因为那时它们才已经全部链接好。
attrs - instance attributes - 实例属性，一个标准化的、所有声明在当前元素上的属性列表，这些属性在所有链接函数间是共享的。

controller - 控制器实例，也就是当前指令通过require请求的指令direct2内部的controller。比如：direct2指令中的controller:function(){this.addStrength = function(){}}，那么，在当前指令的link函数中，你就可以通过controller.addStrength进行调用了。

transclude:(布尔)

如果不想让指令元素内部的内容被模板替换，可以设置这个值为true。会产生一个作用域，一般情况下需要和ng-transclude指令一起使用。比如：template:"
hello every
"，这时，指令元素内部的内容会嵌入到ng-transclude这个div中。也就是变成了
hello every
这是指令内部的内容
。默认值为false；这个配置选项可以让我们提取包含在指令那个元素里面的内容，再将它放置在指令模板的特定位置。当你开启transclude后，你就可以使用ng-transclude来指明了应该在什么地方放置transcluded内容

controller
可以是一个字符串或者函数,若是为字符串，则将字符串当做是控制器的名字，来查找注册在应用中的控制器的构造函数,可以注入一些特殊的服务（参数）:

$scope，与指令元素相关联的作用域
$element，当前指令对应的元素
$attrs，由当前元素的属性组成的对象
$transclude，嵌入链接函数，实际被执行用来克隆元素和操作DOM的函数

除非是用来定义一些可复用的行为，一般不推荐在这使用。指令的控制器和link函数可以进行互换。区别在于，控制器主要是用来提供可在指令间复用的行为但link链接函数只能在当前内部指令中定义行为，且无法再指令间复用。

@、=、&局部 scope 属性

scope值为{}时产生一个隔离作用域，隔离作用域可以通过绑定策略来访问父作用域的属性，directive 在使用隔离 scope 的时候，提供了三种方法同隔离之外的地方交互

@：绑定到当前元素的属性值到scope作用域中。属性值是一个字符串。
=：绑定到当前元素的属性值到scope作用域中。属性值是父作用域中的一个变量名。
&：提供一种方式在父作用域执行一个表达式（函数等）。如果没有指定attr名称，则属性名称为相同的本地名称。