Question

我花了更多的时间来理解为什么删除指令后的类的实例不会破坏。我写了以下代码。请帮我解决一下。代码提供如下。控制台日志中的结果!!

＆＃13;

'use strict';

var app = angular.module('app', []);
app.controller('mainController', function($scope, Service) {
    $scope.service = Service;

    $scope.checkAll = function () {
        $scope.service.triggerListener('update');
    };

    $scope.add = function () {
      $scope.count.push({});
    };

    $scope.object = {
        updateAll: function () {
            console.log('Count of directive "person"');
        }
    };

    $scope.removeElement = function () {
        $scope.count.splice(0, 1);
    };

    $scope.count = [0, 1, 2, 3, 4];
});
app.service('Service', function() {
    this.listeners = [];

    this.addListeners = function (object, event, callback) {
        if (!this.listeners.hasOwnProperty(event)) {
            this.listeners[event] = [];
        }
        this.listeners[event].push(object[callback]);
    };

    this.triggerListener = function(event) {
        if (this.listeners.hasOwnProperty(event)) {
            for (var i = 0; i < this.listeners[event].length; i++) {
                this.listeners[event][i]();
            }
        }
    };
});
app.directive('person', function() {
    var directive = {
        restrict: 'E',
        template: '<button id="{{vm.index}}">Person</button> ' +
                  '<button ng-click="vm.add(index)">add</button>' +
                  '<button ng-click="vm.removeElement(index)">Clear</button>',
        scope: {
            index: '=',
            service: '=',
            removeElement: '&',
            object: '=',
            add: '&'
        },
        controller: function() {

        },
        link: function (scope) {
            scope.vm.service.addListeners(scope.vm.object, 'update', 'updateAll');
        },
        controllerAs: 'vm',
        bindToController: true

    };

    return directive;
});

＆＃13;

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
    <script src="script.js"></script>
</head>
<body ng-controller="mainController">
<div ng-repeat="item in count">
    <person add="add()" index="$index" service="service" object="object" remove-element="removeElement()" show="show()">{{$index}}</person>
</div>
<button ng-click="checkAll()">Count of "person" directive</button>
</body>
</html>

＆＃13;

Answer 1

您的指令仅添加到listeners数组...但您的代码中没有任何内容可以从该数组中删除任何内容

您需要一个removeListener方法，该方法将在removeElement方法中调用。

 $scope.removeElement = function () {
        var index = // get index of element
        $scope.count.splice(index, 1);

        Service.removeListener(index);
 };

在服务中：

this.removeListener = function(index){
   this.listeners.splice(index,1);
};

或者，您可以在指令中使用$destroy事件：

link: function (scope) {
        Service.addListeners(scope.vm.object, 'update', 'updateAll');
        scope.$on('$destroy', function(){
           Service.removeListener(scope.index);
        });
},

请注意，将Service注入指令比将其通过html属性传递到范围更简单，更清晰

app.directive('person', function(Service) {

为什么在删除指令＆＃34; person＆＃34;类的实例仍然存在？

1 个答案: