Angularjs - 使用指令添加ng- *属性

Question

我试图将简单的ng-mouseover绑定添加到由指令管理的元素。但是colud没有让它运转起来。

@ http://jsbin.com/aqibij/2/edit

我在添加ng-mouseover绑定后尝试重新编译元素。指令.compile和外部控制器运行，但是指令.linker不运行。

@ http://jsbin.com/ikebed/1/edit

我已将$ compile移动到链接器中。运行正常，ng-mouseover运行正常，但在链接器中重新编译会导致无限循环，最终导致浏览器崩溃：）

如何使用指令将ng- *绑定添加到元素？我在这些方法中做错了什么？

Answer 1

我以为你和我在同一条船上，但也许你不是。无论哪种方式，这里有两个解决方案。我被困在第二个。

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，span，div，nav等上的指令，你想在指令中添加你的ng-*和属性。

您不能使用template，因为您不知道该元素是什么。不想使用h1并将其替换为div权利吗？这就是我走下编译路线的原因。好吧，template实际上可以是我们可以访问element和attrs的函数。

指令

module.directive( 'mydirective', [ function() {
    return {
        restrict: "A",
        controller: function( $scope ) {
            $scope.test = function() {
                console.log('howdy');
            }
        },
        template: function( element, attrs ) {
            var tag = element[0].nodeName;
            return "<"+tag+" data-ng-transclude data-ng-mouseover='test()></"+tag+">";
        },
        transclude: true,
        replace: true,
        link: function ( scope, element, attrs ) {

        }       
    }   
}]);

HTML /输出

与上述相同。将HTML中的div元素更改为nav，输出将反映更改。