angularjs指令

1.指令属性列表
.directive('directivename', function(){ return { restrict: String, replace: Boolean, transclude: Boolean, template: String or Template Func, templateUrl: String, priority: Number, terminal: Boolean, scope: Boolean or Obj, controller: String or Func, controllerAs: String, link: Func, compile: Func } })

---

2.属性使用

• restrict
  取值：ACEM。A（属性，默认值），E（元素），C（类名），M（注释）
• replace
  取值：true、false。true（指令所在标签被替换），false（不替换，默认值）
• transclude
  取值：true、false。true（保留指令标签内部内容，ng-transclude存储原来内容），false（清空内部内容）
• template
  取值：string、Func。string（字符串拼接内容），func（方法retrun模版内容）
• templateUrl
  取值：string。外部模版地址
• priority、terminal
  多个指令在同一元素内并且同时显示时会报错，所以它们组合使用。
  priority（默认都相同，为0）根据数值从大到小排序优先级；
  terminal（默认为false）为true时不显示比所在指令优先级低的指令
  举个栗子
  HTML
  base.html
  
  ng-controller.
  
  templateUrl1.html
  

  HELLO

  
  script
  angular.module('myApp', [])
  .directive('parent', function() {
  return {
  replace: true,
  transclude: true,
  template: '
  Hello directive.
  
  '
  }
  })
  .directive('child1', function() {
  return {
  restrict: 'E', // 小写还不行
  replace: false, // false可以不设置
  templateUrl: 'templateUrl1.html', // 需要起个服务器
  priority: 1, // 优先显示
  terminal: true // 优先级低于1的不显示
  }
  })
  .directive('child2', function() {
  return {
  restrict: 'AECM',
  template: '
  hide
  '
  }
  })`
  DOM结构
  
  

  dom.png
  
  显示结果
  
  

  rst.png
• scope
  取值：true、false、obj。false（共享父域，默认值），true（继承父域），obj（不继承父域，新建独立作用域）。
  示例
  template
  
  HTML
  

  controller： {{ name }}

  
  一、 false：共享作用域时，指令与控制器相互作用；
  directive('dt1', function(){ return { restrict: 'E', template: function(){ return 'true：' + document.getElementById('s1').innerHTML; } } });
  输入框相互影响
  
  

  dt1.png

二、 true：继承父域时，可取到控制器内的元素，也会被影响，但不影响控制器
directive('dt1', function(){ return { restrict: 'E', scope: true, template: function(){ return 'true：' + document.getElementById('s1').innerHTML; } } });
true输入框变动不影响controller，可以得到controller内定义的值。true未改变前随着controller变动，改变后不被controller影响。

dt2.png

三、 obj：独立作用域
.controller('ctrl', function($scope){ $scope.name = 'baojian', $scope.show = function(cont) { console.log( cont ); }; });
directive('dt1', function(){ return { restrict: 'AE', scope: {}, template: function(){ return 'obj：' + document.getElementById('s1').innerHTML; } } });
1、 {}，obj为{}时与controller之间无影响

dt3.png

2、 @，obj单向被controller影响，与true不同。也可以获取自定义属性的值。告诉myName取属性attrname中的值到新作用域，捋一捋这条线
directive scope = myName --> @attrname --> attrname --> {{name}} = controller scope
scope: { myName: '@attrname' }
注意是单向取值 {{ name }}

下面的情况@后面的字符可以省略
scope: { myName: '@myName' }
3、 =，obj与controller相互影响
directive scope = myName <--> @attrname <--> attrname <--> {{name}} = controller scope
scope: { myName: '=attrname' }
注意双向数据绑定直接用 name

下面的情况=后面的字符可以省略
scope: { myName: '=' }
4、 &，函数绑定
template: 'show', scope: { shw: '&show' }

• controller、link、compile
  描述指令行为的3个参数。
  1、controller
  指令内部作用域的行为，一般绑定scope函数和变量在这里
  controller: function($scope, $element){} // 指向匿名控制器
controller: "ctrl" // 指向控制器ctrl
  2、link
  操作DOM，绑定事件，改变样式等
  link: function(scope, elems, attrs, ctrl) { /** scope可以取到作用域内的变量 *elems是jQuery对象 *ctrl 绑定的其他指令，有可能是数组。requre连接其他指令 */ elems.bind('click', function(){ })； elems.css('background-color','blue'); }
  3、compile
  scope不可用，使用compile时link不能用。返回link函数
  compile: function(elem, attr) { return { pre: function (scope, elem, attr){}, post: function(scope, elem, attr){} } }
  compile和link比较深入的大神分析
• controllerAs
  给controller取别名，controller中可以用this代替$scope。$scope.$watch这种不能代替
  controller: function() { this.name = 'baojian' }, controllerAs: 'bj', template: '{{ bj.name }}'
• require
  请求其他指令的controller,两种匹配策略?^。向上（父元素）查找controller，找不到报错；?查找指令有就返回，没有就返回undefined。请求后通过link的第4个参数传入使用
  .directive('dt1', function(){
  return {
  controller: function(){
  this.name = 'baojian'
  }
  }
  });
  .directive('dt2', function(){
  return {
  require: '?^dt1'
  link: function(scope, elems, attrs, ctrl) {
  if(ctrl) {
  // 可以得到dt1的controller对象（ctrl=new dt1.controller()）
  console.log( ctrl.name );
  }
  }
  }
  });