Angularjs - 添加使用指令NG- *属性 [英] Angularjs - add ng-* attributes using directives

问题描述

我想简单的NG-鼠标悬停绑定添加到由指令管理元素。但是colud搞不定。

I'm trying to add simple ng-mouseover bindings to elements managed by directives. But colud not get it working.

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

我试着加入NG-鼠标悬停结合后重新编译的元素。 directive.compile和外部控制器运行，但directive.linker不运行。

I've tried to recompile the element after adding ng-mouseover binding. directive.compile and outer controller runs, but directive.linker does not run.

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

我搬到了$ compile'ing到连接器。它运行良好，NG-鼠标悬停运行正常，但在连接器重新编译导致死循环，这在最后崩溃的浏览器：）

I've moved the $compile'ing into linker. It runs fine, ng-mouseover runs fine, but recompiling in linker causes endless loop, which crashes the browser at the end :)

我怎样才能*绑定添加NG-使用指令元素呢？那我在这些方法做错了？

How can I add ng-* bindings to elements using directives? What am I doing wrong in these approaches?

推荐答案

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

I assumed you were in the same boat as me, but perhaps you aren't. Either way, here are the two solutions. I was stuck on the second.

如果你知道你正在处理将是一个div，跨度，H1，无论元素 - 或者它并不重要（以一个元素和你需要什么是取代它）

If you know the element you are dealing with is going to be a div, span, h1, whatever - or it doesn't matter (taking one element and replacing it with what you need it to be).

<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，导航等指令，你想添加纳克 - * ，从内部的属性指示。

2) Directive for an unspecific element

This is the problem I was facing. Basically, if you have a directive which could be on an h1, h2, span, div, nav, etc and you want to add your ng-* and attributes from within the directive.

您不能使用模板，因为你不知道的元素是什么。不想拿 H1 ，并用 DIV 右键更换呢？这就是为什么我快要落山编译路线。那么，模板其实是可以，我们可以访问函数元素和 ATTRS 。

You can't use a template because you don't know what the element is. Don't want to take a h1 and replace it with a div right? This is why I was going down the compile route. Well, the template can actually be a function which we can access 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 /输出

同上。在你的HTML修改 DIV 元素到导航，输出将反映的变化。

HTML/Output

Same as above. Change the div element in your HTML to a nav, and the output will mirror the change.

这篇关于Angularjs - 添加使用指令NG- *属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！