angular指令的详细讲解，不断补充

独立作用域：就是在指令中设置了scope: ****

·false 共享父作用域
·true 继承父作用域，并且新建独立作用域
·object 不继承父作用域，创建新的独立作用域

一般来说我们会使用第三种方式：为了避免同一父级作用域下，多个指令的相互污染。

在指令中设置了独立作用域之后，就会用三种方式与外界进行交互：@，=，&

1）@

这种使用方式一般使用与指令内部的作用，例如外部的控制器中定义了一个变量，这个变量只能由控制器自己进行修改，指令只能被动接受，此时就是用这种方式。

但是这不是一种双向绑定，因此需要花括号。

<choice-item   sty-obj= "{{styObj}}"></choice-item>

2）=
这种方式一般用于双向绑定，例如外部控制器定义了一个变量，这个变量不仅控制器能进行修改，并且指令也能进行修改，两边数据交互统一，这个时候就使用这种绑定方式。

这是一种双向绑定的方式意味着绑定的时候不需要花括号。

<choice-item  html-config='htmlConfig' em-config='emConfig'></choice-item>

3）&

这种方式一般是绑定函数，例如在指令内部想传递参数（必须以对象的形式）到外部控制器，并且能触发控制器的某方法。

指令使用场景：
<choice-item part-des = "['个人信息','职务信息','联系信息']"

             filter-click = 'filterClick({headConfig:headConfig})' ></choice-item>

指令中：

link: function($scope,el,attr) {

// 点击确认

$scope.filterClick({headConfig: $scope.emConfig});

}

外部控制器：

$scope.filterClick = function(obj){

  $scope.headConfig = getSelectedConfig(obj.headConfig);

  $scope.filter_show = false;

};

replace: 是一个可选参数，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部：

<my-directive></my-directive>

.directive("myDirective",function(){

       return {

          template:"<h3>世上无难事，只怕有心人</h3>"

       }

})

调用指令之后的结果如下（这是默认replace为false时的情况）：

<my-directive>

      <h3>世上无难事，只怕有心人</h3>

</my-directive>

如果replace被设置为了true：

.directive("myDirective",function(){

           return {

             replace:true,

             template:"<h3>世上无难事，只怕有心人</h3>"

           }

})

那么指令调用后的结果将是：

<h3>世上无难事，只怕有心人</h3>

官方网址：

http://www.angularjs.net.cn/tutorial/5.html

巴特西

angular指令的详细讲解，不断补充

最新文章

热门文章