AngularJS:Direcitve指令用法解读（下）

本篇转载于:http://blog.csdn.net/evankaka
AngularJs GitHub: https://github.com/angular/angular.js/
AngularJs下载地址：https://angularjs.org/
此文接 AngularJs:Directive指令用法解读（上）

8、transclude
如果不想让指令内部的内容被替换，可以设置这个值为true。一般情况下需要ngTransclude指令一起使用。

  
  
  
      
      
      


  

      

          
First Links
          
Second Links
      
  

结果：

image.png

当 transclude:false,时

image.png

**如果指令使用了transclude参数，那么在控制器无法正常监听数据模型的变化了。建议在函数里使用$watch
服务。
9、controller
可以是一个字符串或者函数。
若为字符串，则将字符串当做是控制器的名字，来查找注册在应用中的控制器的构造函数。

angular.module('myApp',[]).directive('myDirective',function(){
  restrict:'A', //始终需要
  controller:'SomeController'
})
//应用中其他的地方，可以是同一个文件或被index.html包含的另一个文件
angular.module('myApp').controller('SomeController',function($scope,$element,$attrs,$transclude){
  //控制器逻辑放在这里
})

也可以直接在指令内部的定义为匿名函数，同样也可以注入任何服务（$log,$timeout等等）。

angular.module('myApp',[]).directive('myDirective',function(){
    restrict:'A',
    controller:function($scope,$element,$attrs,$transclude){
      //控制器逻辑放在这里
    }
})

另外还有一些特殊的服务（参数）可以注入
（1）$scope,与指令元素相关联的作用域
（2）$element，当前指令对应的元素
（3）$attrs，由当前元素属性组成的对象
（4）$transclude，嵌入链函数，实际被执行来用来克隆元素和操作DOM的函数。
注意，除非是用来定义一些可复用的行为，一般不推荐在这使用。

  
  
  
      
      
      
  

  我是林炳文

输出结果：

image.png

image.png

并且在控制台下输出hello everyone
$transclude()它可以接受两个参数，第一个$scope作用域，第二个是带有参数clone的回调函数，而这个clone实际上就是嵌入的内容（经过jQuery包装）,可以在它上面做很多的DOM操作。

它还有最简单的用法就是

使用$transclude会形成一个新的作用域
默认情况下，如果简单的使用$tancsclude(),那么默认的其作用域就是$transclude生成的作用域。
但是如果使用$transclude($scope,function(clone){}),那么作用域就是directive的作用域了。
如果想使用父作用域可以使用 $scope.$parent.
同理：想要的得到一个新的作用域也可以使用$scope.$parent.new();
10、controllerAs
这个选项的作用是可以设置你自己的控制器的别名。
11、require（字符串或者数组）
字符串代表一个指令的名字，它将会作为link函数的第四个函数。

上面的例子中的指令innerDirective和指令innerDirective2复用了定义在outDirective的controller中的方法也进一步说明了，指令中的Controller是用来让不同指令间通信的。