指令范围导致孤立范围

Question

我正在使用 AngularJS 和 Angular UI Bootstrap - Angular UI Bootstrap 版本是旧版本 (0.4.0)。

我正在使用 Modal 指令。在模态正文中，我有自己的显示表单的指令。

这个表单指令有一个控制器函数，可以将表单提交给服务器。

模态框有一个按钮，它调用一个控制器函数（不同的控制器）来广播和事件。表单控制器有一个事件监听器，当引发事件时，它会提交表单。

总之，表单控制器有一个简单的提交表单的功能：

$scope.submitForm = function () {
    //Submit the form to the server
};

表单控制器也有一个事件处理程序

$scope.$on('submitEvent', function () {
    $scope.submitForm();
});

模态是引发事件的另一个控制器的一部分：

$scope.$broadcast('submitForm');

现在问题来了。

每次打开模式时，我都会发现一个新的范围被创建（正如预期的那样，因为我有一个指令的隔离范围）。但是，一旦模态框关闭，范围似乎并没有被破坏。

每次打开模式时，都会创建一个新范围。但之前的范围仍然存在。它基本上作为孤立范围存在 - 它不会影响新模式的新范围。

当模态控制器引发submitForm 事件时，就会出现问题。引发事件时，将触发所有事件侦听器。 结果，即使是孤立作用域上的事件侦听器也会触发多次提交空表单（与打开模式的次数一样多），最后最后一个活动作用域的事件侦听器会触发并提交实际表单。

因此，我的范围似乎没有绑定到任何模板，但似乎会随着应用程序的使用而占用内存。

我的问题是没有正确调用 submitForm 函数 - 我只想知道如何处理孤立作用域...

Answer 1

0.10 版本中也存在孤立作用域的此类问题，应该在下一个版本中修复。

至于孤立作用域，您可以通过模态控制器内部的$scope.$destroy() 手动删除它们。之后，所有模态范围侦听器都将处于非活动状态。删除还意味着当前范围符合垃圾回收条件。