ファンシーボックスによってトリガーされているモーダルウィンドウがあります。モーダルが表示されると、fancybox は AppController がリッスンする「modalShown」イベントをブロードキャストします。そのリスナーで、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>
モーダルコントローラー
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()