从指令中调用控制器函数，而在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.

推荐答案

由于该指令仅调用一个函数(而不是尝试在属性上设置值)，因此可以使用

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屋！