Può una direttiva stessa eliminare da un ambito genitore

Question

Diciamo che ho il seguente codice

<div ng-app="app" ng-controller="controller"> 
<div ng-repeat="instance in instances> 
    <customDirective ng-model="instance"></customDirective> 
</div> 
</div> 

E la mia direttiva personalizzato ha un ambito isolato, definito come:

app.directive('customDirective', function($log) { 
     return { 
      restrict: 'E', 
      templateUrl: './template.htm', 
      scope: {_instance:"=ngModel"}, 
      link: function($scope) { 
      .... 
      } 
     }); 

In questa direttiva, mi avere un'opzione per eliminarlo. La mia domanda è: come posso comunicare alle istanze dell'array nell'ambito genitore e dirgli di distruggere questo oggetto e in effetti rimuovere l'istanza cancellata dal mio DOM?

Spero che abbia senso.

Answer 1

secondo il New Dev in un previous comment, questo è il modo:

var app = angular.module('app', []) 
 
    .directive('customDirective', function($log) { 
 
    return { 
 
     restrict: 'EA', 
 
     template: '<a href="" ng-click="onRemove()">remove me {{model.n}}</a>', 
 
     scope: { 
 
      model:"=", 
 
      onRemove:"&" 
 
     } 
 
    } 
 
    }) 
 
    .run(function($rootScope) { 
 
    $rootScope.instances = [{n:1},{n:2},{n:3},{n:4}]; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-repeat="i in instances"> 
 
    <custom-directive model="i" on-remove="instances.splice($index,1)"> 
 
    </custom-directive> 
 
    </div> 
 
</div>

Answer 2

Innanzitutto, non utilizzare ngModel come attributo DOM. Questa è una direttiva AngularJS utilizzata per associare gli input del modulo alle variabili scope.

L'ho rinominato in model e aggiunto un attributo extra chiamato index.

<div ng-app="app" ng-controller="controller"> 
    <div ng-repeat="instance in instances> 
    <customDirective model="instance" index="$index"></customDirective> 
    </div> 
</div> 

Ora nel tuo controller che si può ascoltare per eventi (come un evento personalizzato si potrebbe titolo removeCustom) emessa dai bambini utilizzando $scope.$on().

app.controller('controller',function($scope) { 
    $scope.instances = [.....]; 
    $scope.$on('removeCustom',function($index) { 
     delete $scope.instances[$index]; 
    }); 
}); 

Poi, nel tuo direttiva personalizzato è necessario utilizzare $scope.$emit() per trasmettere la tua removeCustom evento fino la gerarchia portata al controller.

app.directive('customDirective', function($log) { 
    return { 
     restrict: 'E', 
     templateUrl: './template.htm', 
     scope: { 
      model:"=", 
      index:"=" 
     }, 
     link: function($scope,$el,$attr) { 
      // when you need to remove this 
      $scope.$emit('removeCustom',$scope.index); 
     } 
    }); 

FYI: Una direttiva può sempre togliere stesso chiamando $el.remove() nella funzione di collegamento, ma dal momento che la vostra direttiva è stato creato tramite un ngRepeat sarà solo ottenere ricreato nel prossimo digest. Quindi devi dire al controller di rimuoverlo dall'array instances.