我正在尝试将简单的ng-mouseover绑定添加到由指令管理的元素.但是colud没有让它运转起来.
@ http://jsbin.com/aqibij/2/edit
我在添加ng-mouseover绑定后尝试重新编译元素.指令.compile和外部控制器运行,但指令.linker不运行.
@ http://jsbin.com/ikebed/1/edit
我已将$compile’转移到链接器中.运行正常,ng-mouseover运行正常,但在链接器中重新编译会导致无限循环,最终导致浏览器崩溃:)
如何使用指令将ng- *绑定添加到元素?我在这些方法中做错了什么?
我以为你跟我在同一条船上,但也许你不是.无论哪种方式,这里有两个解决方案.我被困在第二个.
1)特定要素的指令
如果你知道你正在处理的元素将是div,span,h1,无论什么 – 或者它无关紧要(取一个元素并用你需要的元素替换它).
HTML
<div data-mydirective> <span>some other stuff</span> <div>more stuff</div> </div>
指示
module.directive( 'mydirective',[ function() { return { restrict: "A",controller: function( $scope ) { $scope.test = function() { console.log('howdy'); } },template: "<div data-ng-transclude data-ng-mouseover='test()'></div>",transclude: true,replace: true,link: function ( scope,element,attrs ) { } }; }]);
输出
<div ng-mouseover="test()" data-ng-transclude="" data-mydirective=""> <span class="ng-scope">some other stuff</span> <div class="ng-scope">more stuff</div> </div>
2)非特定元素的指令
这是我面临的问题.基本上,如果你有一个可能在h1,h2,div,nav等上的指令,你想在指令中添加你的ng- *和属性.
您不能使用模板,因为您不知道该元素是什么.不想拿一个h1并用div替换它吧?这就是我走下编译路线的原因.好吧,模板实际上可以是一个我们可以访问元素和attrs的函数.
指示
module.directive( 'mydirective',template: function( element,attrs ) { var tag = element[0].nodeName; return "<"+tag+" data-ng-transclude data-ng-mouseover='test()></"+tag+">"; },attrs ) { } } }]);
HTML /输出
与上述相同.将HTML中的div元素更改为nav,输出将镜像更改.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。