angularjs - 在 AngularJS 中从没有隔离作用域的指令调用 Controller 函数

标签 angularjs angularjs-directive angularjs-scope

我似乎无法找到一种在不使用隔离作用域的情况下从指令内调用父作用域上的函数的方法。我知道,如果我使用隔离作用域,我可以在隔离中使用“&”来访问父作用域上的函数,但是在不必要时使用隔离作用域会产生后果。考虑以下 HTML:

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

在这个简单的示例中,我想显示一个 JavaScript 确认对话框,并且只有在确认对话框中单击“确定”时才调用 doIt()。使用隔离范围这很简单。该指令如下所示:

.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 不再针对父作用域执行,而是在隔离作用域中执行(因为使用了隔离作用域)任何指令都会导致该元素上的所有指令使用隔离范围)。 Here is a jsFiddle上面的示例中 ng-hide 不起作用。 (请注意,在此 fiddle 中,当您在输入框中键入“yes”时,该按钮应隐藏。)

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

Here is a jsfiddle我没有使用隔离作用域,并且 ng-hide 工作正常,但是,当然,对confirmAction() 的调用不起作用,而且我不知道如何使其工作。

请注意,我真正寻找的答案是如何在不使用隔离作用域的情况下调用外部作用域上的函数。而且我对让此确认对话框以其他方式工作不感兴趣,因为这个问题的重点是弄清楚如何调用外部作用域,并且仍然能够让其他指令针对父作用域起作用。

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

最佳答案

由于该指令仅调用函数(而不是尝试在属性上设置值),因此您可以使用 $eval而不是 $parse (具有非隔离范围):

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

或者更好,只需使用 $apply ,这将 $eval() 根据范围评估其参数:

scope.$apply(attrs.confirmAction);

Fiddle

关于angularjs - 在 AngularJS 中从没有隔离作用域的指令调用 Controller 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17583004/

相关文章:

google-apps-script - 如何在 Google Apps Script 提供的 HTML 站点中使用 Angular.js?

javascript - 使用文本 Angular 嵌入音频

javascript - 在 AngularJS 中使用指令时如何使表单无效

javascript - 在指令中使用 templateUrl 会卡住应用程序

javascript - 从查询参数中获取所有范围变量

angularjs - AngularJS-格式文本从JSON返回到标题大小写

angularjs - Facebook linting scraper 如何工作,它对我的​​网站有何期望?

javascript - Uncaught SyntaxError : In strict mode code, 函数只能在顶层或立即在另一个函数中声明

javascript - 使用嵌入时,元素指令和属性指令之间有区别吗?

javascript - 无法读取未定义的属性 '$scope'