Question

我在容器中有几个指令，我需要能够专门删除它们中的每一个。每个指令都在一个大的div中，它也包含一个删除按钮。

控制器：

app.controller('eventController', function($scope, $rootScope){;    
  $scope.removeEvent = function (id){
    console.log(id);
    $scope.$broadcast("$destroy" + id);
  }
});

指令：

app.directive('eventView', function () {
  return {
    restrict: 'E',
    replace:true,
    templateUrl: 'partials/EventView.html',
    controller: 'eventController',
    scope: {id : '@'},
    link: function(scope, element){  
        scope.$on("$destroy"+scope.id,function() {
            element.remove();
        }); 
    }
  }
});

问题是我收到此行scope.$on("$destroy"+scope.id,function() {的错误，说明id未定义

添加指令：

app.controller('AddTimelineController', function($scope, $rootScope,$compile){
  $scope.id = 0;
  $scope.addEvent = function (){
    newElement = $compile("<event-View id=\"{{id}}\"></event-View>")($scope);
    $scope.id = $scope.id+1;
    eventContainer = angular.element(document.getElementById('eventContainer'));
    eventContainer.append(newElement);
  }
});

删除指令：

app.controller('eventController', function($scope, $rootScope){;    
  $scope.removeEvent = function (id){
    console.log(id);
    $scope.$broadcast("$destroy" + id);
  }
});

Answer 1

而是使用$broadcast我会$watch使用link来监听id更改。

参见 Plunker

中的演示

$watch()与$broadcast()进行污垢检查并且$broadcast()比$watch()便宜，这是真的。

但是，在您的情况下，在调用link之前调用removeEvent，因此指令没有看到您使用的id。

使用隔离范围删除指令

1 个答案: