用angularjs创建一个新指令

用angularjs创建一个新指令 首先澄清一下。

• 我不建议过度使用

  $compile

  ，有更好的方法将事件侦听器绑定到作用域。
• 我为我解决了这个问题，以学习编译的工作原理并与他人分享。

在内处理模板元素时会发生什么

compile function

？

• 编译阶段将DOM从父元素迭代到子元素。
• 当您在编译函数中 *** 作DOM元素的

  $compile

  子元素时，它会在这些子元素收集指令之前发生，因此，您对template元素的内容所做的每次更改都将被编译并与编译阶段的继续进行链接。
• 当你 *** 纵这是不是这样 的模板元素本身 ，那么

  $compile

  就不会寻找更多的指令在同一元素，因为它是 唯一收集每个每个DOM元素一次指令 。
• 因此，您添加的这些属性只是不被编译！

让$手动编译它：

• 我尝试添加，

  $compile(el)

  但是我的浏览器崩溃了（ 不要嘲笑我 ），原因是它陷入了一个循环，无限循环地进行自我编译。
• 因此，我删除了指令属性，然后

  $compile

  再次删除。
• 我设置了{ priority：1001 } 和 { terminal：true }。这是需要防止其他指令编译功能在我们的指令之前或手动编译之后运行的。

解：

这是一个小矮人：http
://plnkr.co/edit/x1ZeigwhQ1RAb32A4F7Q?p=preview

app.directive('hover', function($compile){  return{    restrict: 'A',    controller: function($scope) {       // all the pre    },    priority: 1001, // we are the first    terminal: true, // no one comes after us    compile: function(el, attrs){      el.removeAttr('hover'); // must remove to prevent infinite compile loop :()      el.attr('data-ng-mouseover', 'onHover('+attrs.index+')');      el.attr('data-ng-mouseleave', 'mouseLeave()');      el.attr('data-ng-click', 'onClick('+attrs.index+')');      el.attr('data-ng-class', '{'+ attrs.onhover +': hover == ' + attrs.index + ' || selected == ' + attrs.index + '}');      var fn =  $compile(el); // compiling again      return function(scope){        fn(scope); //      }    }  }});