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

我正在尝试将简单的 ng-mouseover 绑定添加到由指令管理的元素。但无法让它发挥作用。

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

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

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

我已将 $compile'ing 移至链接器中。它运行良好，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 ) {

        }
    };
}]);

Outputs

<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 and 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/输出

与上面相同。改变divHTML 中的元素nav，输出将反映更改。