angularjs - Angular：使用 & 在指令链接函数中调用控制器函数

Question

我们在尝试使用指令链接函数中的与号“&”调用传递给指令的函数时遇到了问题。

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

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);
    }
}

小提琴。

Answer 2

除了马克的回答，我想指出你可以使用&速记来节省一些字母。这将假定callback-fn您的 HTML 中引用的内容与scope.callbackFn您的范围一样存在。其他一切都还是一样，所以只有 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);
    }
}