Question

我有一组两个指令，它们以递归方式相互调用以呈现树形结构。

我需要将控制器函数引用传递给那些指令，因此它们需要相互传递该引用。除参数外似乎有效。

传递对指令的引用：

<item-list items="data" functionreference="controllerfunction(name)"></item-list>

在指令之间传递引用：

<item-list items="item.children" functionreference="functionreference(name)"></item-list></li>

调用该函数：

$scope.functionreference({name: name});

Here's a example (jsfiddle)

声明和传递函数引用的正确方法是什么？

Answer 1

在itemList模板中：

template: '<ul><item ng-repeat="item in items" item="item" functionreference="functionreference(name)'

您引用了functionreference(name)功能，但您无法调用该功能（您应该改为呼叫functionreference({name:name})。

因此，将模板更改为：

tempate: '<ul><item ng-repeat="item in items" item="item" functionreference="functionreference({name: name})'

它应该可以正常工作。

<强>更新
同样适用于<li>指令中的附加item：

<item-list items="item.children" functionreference="functionreference({name:name})"></item-list>
// Instead of: functionreference(name)

另请参阅此 updated demo 。

Answer 2

您必须确保使用 like this 。 确保编辑在两个地方完成，如下所示。

在指令中使用控制器功能的任何地方使用functionreference="functionreference({name:name})"。

myApp.directive('itemList', function ($compile) {
    return {
        restrict: 'E',
        template: '<ul><item ng-repeat="item in items" item="item" ' +  
                  'functionreference="functionreference({name:name})"> ' + 
                  '</item></ul>',
        scope: {
            items: '=',
            functionreference: '&'
        }
    };
});

和

$element.append('<li>{{item.name}} [   ' +
                '<a href="#" ng-click="directivefunction(item.name)">directivefunction</a> / ' + // DOES work
                '<a href="#" ng-click="functionreference({name:item.name})">functionreference</a>]' + // Does NOT work
                            '<item-list items="item.children" functionreference="functionreference({name:name})"></item-list></li>');

在指令之间传递控制器函数

2 个答案: