删除指令使用隔离作用域 [英] Removing Directive using Isolated Scopes

问题描述

我有一个容器几种不同的指令，我需要能够明确删除它们。每个指令是在一个大的，其中包含一个删除按钮，以及一个div。

控制器：

  app.controller（'eventController'，函数（$范围，$ rootScope）{;
  $ scope.removeEvent =功能（ID）{
    的console.log（ID）;
    。$ $范围广播（$消灭+身份证）;
  }
}）;
 

该指令：

  app.directive（'使用EventView'，函数（）{
  返回{
    限制：'E'，
    更换：真实，
    templateUrl：'谐音/ EventView.html'，
    控制器：'eventController'，
    适用范围：{ID：'@'}，
    链接：功能（范围，元素）{
        范围。在$（$消灭+ scope.id，函数（）{
            element.remove（）;
        }）;
    }
  }
}）;
 

问题是，我得到一个错误这一行范围。在$（$消灭+ scope.id，函数（）{说的id未定义

添加指令：

  app.controller（'AddTimelineController'，函数（$范围，$ rootScope，$编译）{
  $ scope.id = 0;
  $ scope.addEvent =功能（）{
    为newElement = $编译（＆LT;事件查看ID = \\{{ID}} \\＆GT;＆LT; /事件视图＆gt;）（$范围内）;
    $ scope.id = $ scope.id + 1;
    eventContainer = angular.element（的document.getElementById（'eventContainer'））;
    eventContainer.append（为newElement）;
  }
}）;
 

要删除指令：

  app.controller（'eventController'，函数（$范围，$ rootScope）{;
  $ scope.removeEvent =功能（ID）{
    的console.log（ID）;
    。$ $范围广播（$消灭+身份证）;
  }
}）;
 

解决方案

而不是使用 $广播我会使用 $观看到链接将监听 ID 改变。

请参阅演示在<大骨节病> Plunker

这是真的， $腕表（）正在做污垢检查VS $广播（）和 $广播（）比 $便宜腕表（）。

不过你的情况，你叫链接在 removeEvent 调用;因此，指令不正确见 ID 您使用。

I'm having several directives in a container where I need to be able to remove each of them specifically. Each directive is in a big a div which contains a remove button as well.

The controller:

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

The directive:

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();
        }); 
    }
  }
});

The issue is that I'm getting an error with this line scope.$on("$destroy"+scope.id,function() { saying that id is undefined

to add the directive:

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);
  }
});

To remove the directive:

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

解决方案

Instead using $broadcast I would use $watch into link that will listen on id change.

See Demo in Plunker

It's true that $watch() is doing dirt-checking vs $broadcast()and $broadcast() is cheaper than $watch().

However in your case you call the link before removeEvent is called and therefore directive doesn't see proper id you use.

这篇关于删除指令使用隔离作用域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！