AngularJS：函数不是函数

Question

我有一个 AngularJS 应用程序，在其中一个页面上，我有许多小部件，每个小部件都显示有关系统一部分状态的一些信息。 我目前正在添加功能以允许用户“隐藏”给定小部件的标题。

在显示小部件的页面上有一个“设置”按钮，单击该按钮时，会在每个小部件顶部覆盖一个工具栏。工具栏有许多按钮 - 其中一个是另一个“设置”按钮，它会打开一个对话框，允许用户更改该特定小部件的设置。

我在对话框中添加了一个复选框，以使用户能够从视图中“隐藏”该特定小部件的标题：

在对话框中选择复选框时，用户点击“预览”，我期待（最终 - 我仍然正在研究该功能的实现）标题为该特定窗口小部件被隐藏。但是，目前，当用户单击“预览”时，无论复选框是否被选中，我都会在控制台中收到一条错误消息：

TypeError: $scope.widget.toggleWidgetHeading 不是函数

此错误来自 ctrl.js 中的 $scope.preview 函数，当单击对话框上的“预览”按钮时调用：

}).controller('WidgetPickerCtrl', function($scope, $timeout, fxTag, gPresets, appWidget) {
    ...
    $scope.preview = function(e) {
        $scope.widget.toggleWidgetHeading();
        ...
    };
    ...
});

我不明白为什么会出现此控制台错误，因为 toggleWidgetHeading() 显然是一个函数...

如果我在 Sublime 中右键单击上面的函数调用，然后选择“转到定义”，我将被带到定义函数的directive.js 文件：

.directive('appWidget', function($timeout, fxTag, appColorFilter) {
    return {
        ...
        link: function($scope, $element){
            ...
            var toggleWidgetHeading = function(){
                ...
            }
            ...
        }
    }
})

此外，单击对话框上的“预览”按钮不再关闭对话框...

为什么我被告知这个函数调用不是一个函数，而它被明确定义为一个函数？这里的问题是否与范围有关（即我从 ctrl.js 调用该函数，即使它是在directive.js 中定义的）？

Answer 1

添加... 的指令的定义实际上是与指令范围非常相关的部分。

指令可以实现多种范围。您实际上可以继承和访问父范围，或者您可以拥有一个独立的范围。 您可以在官方文档中阅读到详细说明：

https://docs.angularjs.org/guide/directive

然而，无论你使用什么范围，默认情况下 AngularJS 都实现了范围的继承，就像通常继承一样：子级可以访问父级方法，但父级不能访问子级的方法。

在这里，您似乎试图从父范围（控制器）访问指令的范围，这实际上是不可能的。 （即使在链接函数中您将 toggleWidgetHeading 定义为私有变量，并且与 $scope 本身没有关联 - 但它也不起作用）。

所以在这些情况下你几乎没有选择：

1. 在服务中定义“可见属性”并将服务注入指令和控制器中。然后使用服务来访问和更改这些值，以便它们在控制器和指令之间同步
2. 将范围参数添加到指令中作为回调& 并从控制器提供一个函数，该函数返回所选小部件的可见性，因此您可以从指令中调用该函数并取回小部件可见性的值李>
3. 在指令中添加一个范围参数作为双向数据绑定=，它绑定到小部件对控制器的可见性，以便您的控制器和指令之间始终保持同步
4. 使用events 在控制器和指令之间进行通信，在可见性更改时从控制器广播事件，并从获取小部件可见性值的指令中读取事件

我希望它有意义