Angularjs $compiling模态窗口内容创建孤立控制器。

Question

我有一个由fancybox触发的模态窗口。当模式显示时，fancybox广播了一个AppController侦听的“AppController”事件。在该侦听器中，AppController对模态窗口的内容调用$compile，以便在视图上创建ModalController、内插和绑定事件。

我的问题是，当我关闭模型时，模态元素被从DOM中移除，但是它的绑定ModalController实例在某个地方持久化。所以每次我打开一个新窗口，我就会创建一个新的控制器，所有这些孤立的控制器都会响应模态窗口中的事件。

我的问题是，既然$compile创建了新控制器，但没有返回对它的引用，那么如何清理在应用程序中传播的这些未使用的控制器

相关代码(咖啡)..。

Fancybox指令

# sets up the fancybox on each element that triggers the modal...
# <a href="#" fancybox="templateToLoad.html">Trigger Modal</a>
@app.directive 'fancybox', ["$templateCache", "$compile", ($templateCache, $compile) ->
  (scope, element, attrs) ->
    options =
      afterShow : ->
          scope.$root.$broadcast 'modalShown', scope
    element.fancybox options

modal.html

<div class="fancybox-skin">
  <div class="fancybox-outer">
    <div class="fancybox-inner ng-scope">
      <div ng-controller="ModalController" style="..." class="ng-scope">
        <a href="#" ng-click="someAction()">Some Action in ModalController</a>
      </div>
    </div>
  </div>
</div>

ModalController

app.controller 'ModalController', [
  '$scope', '$rootScope',($scope, $rootScope) ->

    # keeping track of controllers for debugging
    window.globalCounter ||= 0
    $scope.localCounter = window.globalCounter++

    someAction = () ->
        console.log 'action'

AppController

@app.controller "AppController", [
  "$scope", "$rootScope", "$compile", ($scope, $rootScope, $compile) ->
       $scope.$on 'modalShown', (e, localScope) ->
            console.log('compiling modal contents')
            $compile($('.fancybox-inner'))(localScope)
            $rootScope.$apply() 

Answer 1

您所拥有的ModalController实际上只是一个函数，可以在其相关的$scope上设置任何功能，然后就再也不会看到或听到它了。您仍然看到的任何剩余功能要么留在此作用域上，要么从控制器中泄漏出来，应该在$scope.$on('$destroy', function() { ... })块中清除。

如果功能位于作用域上的$watches或$on中，则当作用域被破坏时，它们应按角度自动清除。如果它们仍然存在，那么当模态关闭时，范围没有被破坏。

您正在使用$compile($('.fancybox-inner'))(localScope)亲自传递父作用域。如果您不使用localScope，而是使用localScope.$new()，那么当您看到模式关闭时，就可以在这个新的作用域上安全地调用.$destroy()。

顺便提一下，我是否可以建议将AppController功能移到fancybox指令中，并完全避免这些广播-- DOM操作和编译在指令中比控制器更适合，您可以更容易地跟踪需要创建的任何新的作用域。