một chỉ thị thể xóa chính nó từ một phạm vi mẹ

Question

Hãy nói rằng tôi có đoạn mã sau

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

Và chỉ thị tùy chỉnh của tôi có một phạm vi cô lập, định nghĩa là:

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

Trong chỉ thị này, tôi có tùy chọn để xóa nó. Câu hỏi của tôi là làm thế nào tôi có thể giao tiếp trở lại các trường hợp mảng trong phạm vi cha mẹ và nói với nó để tiêu diệt đối tượng này và có hiệu lực loại bỏ các trường hợp đã xóa từ DOM của tôi?

Hy vọng điều đó có ý nghĩa.

Answer 1

theo New Dev trong một previous comment, đây là cách:

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

Trước tiên, không sử dụng ngModel làm thuộc tính DOM. Đây là một chỉ thị AngularJS được sử dụng để liên kết các đầu vào biểu mẫu với các biến phạm vi.

Tôi đã đổi tên thành model và thêm thuộc tính bổ sung được gọi là index.

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

Bây giờ trong điều khiển của bạn, bạn có thể nghe cho các sự kiện (chẳng hạn như một sự kiện tùy chỉnh bạn có thể tiêu đề removeCustom) phát ra bởi trẻ em sử dụng $scope.$on().

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

Sau đó, trong chỉ thị tùy chỉnh của bạn, bạn phải sử dụng $scope.$emit() để phát sóng removeCustom bạn sự kiện lên hệ thống phân cấp phạm vi để điều khiển.

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: Một chỉ thị luôn có thể loại bỏ tự bằng cách gọi $el.remove() trong hàm liên kết, nhưng kể từ khi chỉ thị của bạn được tạo ra thông qua một ngRepeat nó sẽ chỉ được tái tạo trong tiêu hóa tiếp theo. Vì vậy, bạn phải nói với bộ điều khiển để loại bỏ nó khỏi mảng instances.