Question

我们遇到一个问题，试图使用＆符号'＆amp;'调用传递给指令的函数在我们的指令链接函数中。

似乎在控制器上调用了该函数，但在调用中没有传递参数。我们看到的所有示例都涉及通过在模板中创建调用来进行传递。有没有办法从你的模板调用你的指令函数，然后在调用传递给它的控制器函数的指令中做一些事情？

Answer 1

您是否在{} s内传递了参数？例如，在指令的链接函数中，您将要调用这样的方法：scope.someCtrlFn({arg1: someValue});

<div my-directive callback-fn="ctrlFn(arg1)"></div>

app.directive('myDirective', function() {
    return {
        scope: { someCtrlFn: '&callbackFn' },
        link: function(scope, element, attrs) {
            scope.someCtrlFn({arg1: 22});
        },
    }
});

function MyCtrl($scope) {
    $scope.ctrlFn = function(test) {
        console.log(test);
    }
}

Fiddle

Answer 2

除了马克的回答之外，我想指出你可以使用&速记来节省一些信件。这将假设您的HTML中引用的callback-fn在您的范围内以scope.callbackFn存在。 Everthing else仍然是相同的，所以只有2行可以改变。我将Mark的版本保留为评论，因此您应该能够轻松发现差异。

<div my-directive callback-fn="ctrlFn(arg1)"></div>

app.directive('myDirective', function() {
    return {
        scope: { callbackFn: '&' }, //scope: { someCtrlFn: '&callbackFn' },
        link: function(scope, element, attrs) {
            scope.callbackFn({arg1: 22}); //scope.someCtrlFn({arg1: 22});
        },
    }
});

function MyCtrl($scope) {
    $scope.ctrlFn = function(test) {
        console.log(test);
    }
}

Angular：使用＆amp;调用指令链接函数内的控制器函数。

2 个答案: