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

问题描述

我正在尝试向指令管理的元素添加简单的 ng-mouseover 绑定.但是 colud 无法正常工作.

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

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

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

我已将 $compile'ing 移动到链接器中.它运行良好，ng-mouseover 运行良好，但在链接器中重新编译会导致无限循环，最终导致浏览器崩溃:)

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

解决方案

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

1) 特定元素的指令

如果您知道要处理的元素将是 div、span、h1 等 - 或者无关紧要(取一个元素并将其替换为您需要的元素).

HTML

<span>一些其他的东西</span><div>更多内容</div>

指令

module.directive( 'mydirective', [ function() {返回 {限制:A"，控制器:函数($scope){$scope.test = function() {console.log('你好');}},模板:<div data-ng-transclude data-ng-mouseover='test()'></div>",转置:真实，替换:真的，链接:函数(范围、元素、属性){}};}]);

输出

<span class="ng-scope">其他一些东西</span><div class="ng-scope">更多内容</div>

2) 非特定元素的指令

这就是我面临的问题.基本上，如果您有一个指令可以在 h1、h2、span、div、nav 等上，并且您想从指令中添加 ng-* 和属性.

您不能使用 template 因为您不知道元素是什么.不想将 h1 替换为 div 对吗?这就是我走编译路线的原因.好吧，template 实际上可以是一个我们可以访问 element 和 attrs 的函数.

指令

module.directive( 'mydirective', [ function() {返回 {限制:A"，控制器:函数($scope){$scope.test = function() {console.log('你好');}},模板:函数(元素，属性){var tag = element[0].nodeName;return "<"+tag+" data-ng-transclude data-ng-mouseover='test()></"+tag+">";},转置:真实，替换:真的，链接:函数(范围、元素、属性){}}}]);

HTML/输出

同上.将 HTML 中的 div 元素更改为 nav，输出将反映更改.

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

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

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 :)

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.

1) Directive for specific element

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).

HTML

<div data-mydirective>
    <span>some other stuff</span>
    <div>more stuff</div>
</div>

Directive

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) 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.

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.

Directive

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/Output

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

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