angularjs – 指令链接函数执行顺序

发布时间：2020-12-17 07:31:57 所属栏目：安全来源：网络整理

导读：所有这些角度我都是新的…… 我有一个自定义指令,我们称之为myDar. 在这个指令中我定义了一个链接函数. 在我的html中,我想使用此指令的多个嵌套标签,如下所示： myDar id="outer"myDar id="inner"/myDar/myDar 我希望首先执行“外部”的链接功能.我该怎么做

所有这些角度我都是新的……

我有一个自定义指令,我们称之为myDar.
在这个指令中我定义了一个链接函数.
在我的html中,我想使用此指令的多个嵌套标签,如下所示：

<myDar id="outer"><myDar id="inner"></myDar></myDar>

我希望首先执行“外部”的链接功能.我该怎么做呢？

这是一般性问题.
如果它有帮助,那么我真正想做的是创建包装jquery ui layout(link to the website)的指令.所以我有一个“ui-layout”的指令和“中心”,“西方”等的指令.
在“ui-layout”指令中,我调用$(tElm).layout(options).
创建嵌套布局时遇到问题：

<ui-layout class="layout-container">
    <ui-layout-center>
        <ui-layout>
            <ui-layout-center>inner center</ui-layout-center>
            <ui-layout-west>inner west</ui-layout-west>
        </ui-layout>        
    </ui-layout-center>
    <ui-layout-west>west</ui-layout-west>
</ui-layout>

Angular首先执行内部“ui-layout”指令的链接功能,但是对于jquery ui布局插件工作,它需要先调用外部的$(tElm).layout(options),否则布局不能正确呈现.

为此,您将利用指令的控制器.它将是一个定义注册嵌套控制器的方法的类,另一个用于在此元素上执行所需命令(此处为$(…).layout(…)),然后在其所有子项上执行.这意味着外部指令负责协调布局的创建.

完整的示例代码是：

app.directive("y",function() {
    function Controller($element) {
        this.$element = $element;
        this.children = [];
    }

    Controller.prototype.register = function(child) {
        this.children.push(child);
    };

    Controller.prototype.execute = function() {
        console.log("PAYLOAD: " + this.$element.attr("id"));
        for( var i=0; i < this.children.length; i++ ) {
            this.children[i].execute();
        }
    };

    return {
        require: "y",controller: ["$element",Controller],link: function(scope,element,attrs,ctrl) {
            var e = element.parent(),nested = false;
            while( e != null ) {
                if( e.controller("y") != null ) {
                    e.controller("y").register(ctrl);
                    nested = true;
                    break;
                }
                e = e.parent();
                if( typeof(e.tagName) === "undefined" ) break; //XXX Needed,at least for fiddle
            }
            if( !nested ) ctrl.execute();
        }
    };
});

替换行console.log(“PAYLOAD：”this.$element.attr(“id”));用实际的代码来运行.见相关小提琴：http://jsfiddle.net/8xSjZ/

如果外部指令与当前指令不同,那么获取父控制器就像要求“？^ y”一样简单.在这种情况下,它为我们提供了当前的控制器,因此我们必须循环(e.parent())selfelfes.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!