angularjs – 如何在Angular中的递归指令中传递函数引用？

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

导读：我有这个指令： app.directive('recursiveListItem',['$http','RecursionHelper',function ($http,RecursionHelper) { return { restrict: 'E',scope: { parent: '=',onNodeClick: '',},compile: function (element,attributes) { return RecursionHelper.co

我有这个指令：

app.directive('recursiveListItem',['$http','RecursionHelper',function ($http,RecursionHelper) {
    return {
        restrict: 'E',scope: {
            parent: '=',onNodeClick: '&',},compile: function (element,attributes) {
            return RecursionHelper.compile(element);
        },template:
            '<div class="list-group-item-heading text-muted parent "> 
                <input type="checkbox" data-ng-click="visible = !visible" id="{{parent.Name}}">
                <label for="{{parent.Name}}">&nbsp;&nbsp;</label>
                <a href="javascript:void(0)" data-ng-click="onNodeClick({node: parent})">{{parent.Name}}</a> 
            </div> 
            <ul data-ng-if="parent.Children.length > 0" data-ng-show="visible"> 
                <li ng-repeat="child in parent.Children"> 
                    <recursive-list-item data-parent="child" data-on-node-click="onNodeClick"></recursive-list-item> 
                </li> 
            </ul>',};
}]);

这是帮手：

app.factory('RecursionHelper',['$compile',function ($compile) {
    var RecursionHelper = {
        compile: function (element) {
            var contents = element.contents().remove();
            var compiledContents;
            return function (scope,element) {
                if (!compiledContents) {
                    compiledContents = $compile(contents);
                }
                compiledContents(scope,function (clone) {
                    element.append(clone);
                });
            };
        }
    };

    return RecursionHelper;
}]);

一切都像魅力,但我没有让我的节点点击工作.对于所有根项目,’回调’工作正常,但从那时起,所有孩子都不会触发回调.我认为它与将函数引用传递给模板中的下一个子项有关.

我也尝试过data-on-node-click =“onNodeClick(node)”,但这也不起作用.

有人知道如何将函数引用传递给子节点吗？

基础问题

作为有助于了解’&’的主角其中docs描述的方式如下：

& or &attr – provides a way to execute an expression in the context of
the parent scope.

Often it’s desirable to pass data from the isolated scope via an
expression and to the parent scope,this can be done by passing a map
of local variable names and values into the expression wrapper fn. For
example,if the expression is increment(amount) then we can specify
the amount value by calling the localFn as localFn({amount: 22})

为了实现这一目的,通过&包装在另一个函数parentGet()中.我们可以通过查看click处理函数变量的内容来看到这一点.首先,在它进入&这是我们所期望的：

function (node) {
    console.log("called with ",node);
}

但是,在你的指令中,经过’&’后,它看起来像这样：

function (locals) {
     return parentGet(scope,locals);
}

因此,它不是直接引用您的单击处理函数,而是一个调用,它将使用父作用域和您传入的任何局部函数来应用您的函数.

问题是,从我所知道的,当我们嵌套时,范围变量不断更新到新的嵌套父范围.这对我们不利.我们希望执行上下文成为您的单击处理程序所在的顶级作用域.否则,我们会失去对您的功能的参考 – 正如我们所看到的那样.

解

为了解决这个问题,我们保留对原始函数的引用(在我们嵌套时不受parentGet()的影响).然后当我们传入它时,parentGet()中使用的作用域就是具有单击处理函数的作用域.

首先,让我们使用与实际函数不同的名称,而不是用于参数.我设置了这样的函数$scope.onNodeClickFn = function(node){…}

然后我们进行3次更改：

1)添加第二个范围变量(topFunc)：

scope: {
          onNodeClick: '&',topFunc: '='
       }

onNodeClick是包装函数(包括范围参数). topFunc是对unwrapped函数的引用(请注意,我们在using =中传递它,因此它是对没有&适用的包装器的函数的引用).

2)在顶层,我们传递两个函数引用.

<recursive-list-item on-node-click="onNodeClickFn(node)" top-func="onNodeClickFn" parent=parent ></recursive-list-item>

(注意top-func参数缺少().)

3)将新的topFunc参数传递给模板：

<recursive-list-item data-parent="child" data-on-node-click="topFunc(node)" top-func="topFunc"></recursive-list-item>

因此,我们现在在每个嵌套范围内维护一个引用到原始函数并在模板中使用它.

你可以看到它在这个小提琴中工作：http://jsfiddle.net/uf6Dn/9/

（编辑：李大同）

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