Scope не удаляется

Question

Использование углового 1.2.9

Объяснение того, что работает: У меня есть список слева от веб-страницы, где пользователь может нажать кнопку +, чтобы добавить вид на .viewSpace.

Когда пользователь нажимает +

angular.element(document.getElementById('viewSpace')).append($compile("<div my-graph></div>")(scope)); 

называется. мой-граф является директива, которая использует шаблон, который выглядит как

<div ng-controller="MyGraphController" id="{{viewId}}"> 
... 
</div> 

viewId быть и создан на конкретизации, что идентификатор передается в службу, которая отслеживает мнения и транслирует изменения так, что левая точка зрения может знать, обновите список с помощью новой кнопки, чтобы удалить только что добавленные элементы. Директива remove выглядит так:

app.directive("removeView", function($compile){ 
    return function(scope, element, attrs){ 
     element.bind("click", function(){ 
      var id = '#'+attrs.removeView; // id of view to remove when clicked 
      console.log('Removing', id); 
      angular.element(id).parent().remove(); 
      //angular.element(document.getElementById(attrs.tseRemoveView)).remove(); 
      $compile(".viewSpace"); 
     }); 
    }; 
}); 

и графический контроллер cconsists функции destroy.

chartApp.controller('MyGraphController', function ($scope, $interval, controllerService) { 
    $scope.cid = controllerService.getCurrentControllerId(); 
    $scope.viewId = controllerService.createViewId($scope.cid); 
    controllerService.bindToViewList($scope.viewId, "Linear Graph");// for view communication. 

    $scope.$on("$destroy", function() { // never gets called. 
     console.log('destroying cid', $scope.cid); 
     resetGraph(); // the intervals will persist after controller instance is destroyed, so take care of them onDestroy 
     controllerService.removeBindToViewList($scope.viewId, "Linear Graph"); 
    }); 
}); 

Проблема: график исчезает из DOM, но область действия остается, и функция destroy никогда не вызывается. Есть идеи?

chartApp.directive('myGraph', function($rootScope, $window) { 
    return { 
     restrict: 'EA', 
     templateUrl: 'myGraph.tpl.html', 
     scope: {}, 
     link: function(scope, elem, attrs) { 
      elem.on('$destroy', function(){// does get called though 
       alert('elem destroyed'); 
      }); 
     } 
    }; 
}); 

controllerService функции для просмотра обмена данными accross областей:

this.bindToViewList = function(id, viewType){ 
     console.debug('bindToViewList', id, viewType); 
     if(viewType in views){ 
      views[viewType].push(id); 
     }else{ 
      views[viewType]=[id]; 
     } 
     broadcastViewUpdate(); 
    } 

    this.removeBindToViewList = function(id, viewType){ 
     console.debug('removeBindToViewList', id, viewType); 
     var index = views[viewType].indexOf(id); 
     views[viewType].splice(index, 1); 
     broadcastViewUpdate(); 
    } 

Answer 1

Короткий ответ, $ уничтожить автоматически не вызывается Угловое, когда элемент удаляется. Вы должны вызвать его явно (https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope):

$destroy() must be called on a scope when it is desired for the scope and its child scopes to be permanently detached from the parent and thus stop participating in model change detection and listener notification by invoking.

Подробнее: http://www.bennadel.com/blog/2706-always-trigger-the-destroy-event-before-removing-elements-in-angularjs-directives.htm

Кроме того, ваша конструкция, кажется, в значительной степени полагаться на DOM вместо подключения вашей модели и позволяя Угловая обрабатывать взаимодействие с DOM. Похоже, что у вас может быть одна директива для вашего пространства просмотров, которая отображает и массив представлений с помощью ng-repeat, а затем вызывает splice(), чтобы удалить представление, когда пользователь нажимает кнопку -. Angular будет обрабатывать DOM, и вам не нужно будет делать какой-либо jQuery, поскольку угловой удалит что-нибудь из DOM, которое было удалено из массива.