从 AngularJS 中没有独立作用域的指令调用控制器函数 [英] Call a controller function from a directive without isolated scope in AngularJS

问题描述

我似乎无法找到一种在不使用独立作用域的情况下从指令中调用父作用域上的函数的方法.我知道如果我使用隔离范围，我可以只使用&"在隔离中访问父作用域上的函数，但在没有必要时使用隔离作用域会产生后果.考虑以下 HTML:

I cannot seem to find a way to call a function on the parent scope from within a directive without using isolated scope. I know that if I use isolated scope I can just use "&" in the isolated to access the function on the parent scope, but using isolated scope when it isn't necessary has consequences. Consider the following HTML:

<button ng-hide="hideButton()" confirm="Are you sure?" confirm-action="doIt()">Do It</button>

在这个简单的示例中，我想显示一个 JavaScript 确认对话框，并且只有在确认对话框中单击确定"时才调用 doIt().使用隔离作用域很简单.该指令如下所示:

In this simple example, I want to show a JavaScript confirm dialog and only call doIt() if they click "OK" in the confirmation dialog. This is simple using an isolated scope. The directive would look like this:

.directive('confirm', function () {
    return {
        restrict: 'A',
        scope: {
            confirm: '@',
            confirmAction: '&'
        },
        link: function (scope, element, attrs) {
            element.bind('click', function (e) {
                if (confirm(scope.confirm)) {
                    scope.confirmAction();
                }
            });
        }
    };
})

但问题是，因为我使用的是隔离作用域，上例中的 ng-hide 不再针对父作用域执行，而是在隔离作用域中执行(因为使用了隔离作用域在任何指令上导致该元素上的所有指令使用隔离范围).这是上述示例的 jsFiddle，其中 ng-hide 不起作用.(请注意，在这个小提琴中，当您在输入框中键入是"时，按钮应该隐藏.)

But the problem is, because I'm using isolated scope, ng-hide in the example above no longer executes against the parent scope, but rather in the isolated scope (since using an isolated scope on any directive causes all directives on that element to use the isolated scope). Here is a jsFiddle of the above example where ng-hide is not working. (Note that in this fiddle, the button should hide when you type "yes" in the input box.)

另一种选择是不使用隔离作用域，这实际上是我在这里真正想要的，因为不需要隔离该指令的作用域.我遇到的唯一问题是，如果我不在独立作用域上传递方法，我如何在父作用域上调用方法?

The alternative would be to NOT use an isolated scope, which actually is what I really want here since there is no need for this directive's scope to be isolated. The only problem I have is, how do I call a method on the parent scope if I don't pass it in on on isolated scope?

这是一个 jsfiddle，我没有使用隔离范围，并且 ng-hide 工作正常，但是，当然，对 confirmAction() 的调用不起作用，我不知道如何使它起作用.

Here is a jsfiddle where I am NOT using isolated scope and the ng-hide is working fine, but, of course, the call to confirmAction() doesn't work, and I don't know how to make it work.

请注意，我真正想要的答案是如何在不使用独立作用域的情况下调用外部作用域上的函数.而且我对让这个确认对话框以另一种方式工作不感兴趣，因为这个问题的重点是弄清楚如何调用外部作用域，并且仍然能够让其他指令对父作用域起作用.

Please note, the answer I am really looking for is how to call functions on the outer scope WITHOUT using an isolated scope. And I am not interested in making this confirm dialog work in another way, because the point of this question is to figure out how to make calls to the outer scope and still be able to have other directives work against the parent scope.

或者，如果其他指令仍然适用于父作用域，我也有兴趣了解使用隔离作用域的解决方案，但我认为这是不可能的.

Alternatively, I would be interested to hear of solutions that use an isolated scope if other directives will still work against the parent scope, but I don't think this is possible.

推荐答案

由于指令只是调用一个函数(而不是尝试设置属性的值)，您可以使用 $eval 而不是 $parse(具有非隔离作用域):

Since the directive is only calling a function (and not trying to set a value on a property), you can use $eval instead of $parse (with a non-isolated scope):

scope.$apply(function() {
    scope.$eval(attrs.confirmAction);
});

或者更好，只需使用 $apply，将 $eval() 针对作用域评估其参数:

Or better, simply just use $apply, which will $eval()uate its argument against the scope:

scope.$apply(attrs.confirmAction);

小提琴

这篇关于从 AngularJS 中没有独立作用域的指令调用控制器函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！