Angular:使用&调用指令链接函数内的控制器函数

Question

我们遇到的问题是在我们的指令的link函数中使用&符号'&'调用传递给指令的函数.

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

Answer 1

你在{}s 里面传递参数吗？例如,在指令的link函数中,你需要像这样调用方法: 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);
    }
}

小提琴.

Answer 2

除了Mark的回答,我还想指出你可以用&速记来节省一些信件.这将假设callback-fn您的HTML中引用的内容与您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);
    }
}