angularjs - 指令无权访问 Controller 功能(AngularJS)

Question

当我声明要使用的指令来访问 Controller 函数时，它找不到 Controller 。

这是我在 app.js 中声明的指令:

app.directive("delete", function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
            elem.bind('click', function(e) {

                alertCtrl.alert();

            });
        }
    }
});

这是我的 Controller :

app.controller('AlertController',  function() {

    this.alert = function() {
        alert('Ahah!');
    }


});

这是我的 HTML:

<div ng-controller="AlertController as alertCtrl">

    <div ng-repeat="i in [1,2,3]">

        <img src='image.png' delete />

    </div>

</div>

如果我单击图像，我不会收到任何警报，并且控制台显示alertCtrl 未定义。当您点击带有删除指令的图像时，为什么alertCtrl没有被定义？

如果我将 Controller 更改为 $scope.alert = function()... 它工作正常。但我不想要这个。

此外，这是处理这种情况的正确方法吗？如果不是，最佳实践是什么？

Answer 1

您需要在范围内调用它。作用域具有属性alertCtrl，它是您的 Controller 实例。当您将 Controller 别名 (alertCtrl) 绑定(bind)到 html 上时，它就可用，因为 scope 在那里是隐式的。但是当您在 javascript 中(即在指令中)或另一个 Controller 中执行此操作时，您需要从范围中获取 Controller 实例(定义为别名)作为属性。

 scope.alertCtrl.alert();

<强> Plnkr