Angular remove Element

Question

I have a directive:

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

The controller for the directive:

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

There are several instances of the same directives in the rootscope. Each directive is a div in which there is a remove button which is bind to the removeEvent method in the controller definition.

The problem is that when a remove button is pressed in one those div(from eventView directive), all the divs are being removed. I only want the current directive from where the destroy is being broadcasted to be removed. I know its because i'm broadcasting $scope.$broadcast("$destroy") but how can I remove only the current scope, is there a predefined method only for that current scope

Are these divs rendered thru ng_repeat or do they have some unique identifier?? — harishr
– harishr, Commented Jul 13, 2014 at 3:46
You should investigate on isolated scopes. Your directives needs to know which scope it's referring to. Here's a good article: sitepoint.com/practical-guide-angularjs-directives — Christian Bonato
– Christian Bonato, Commented Jul 13, 2014 at 4:34

harishr · Accepted Answer · 2014-07-13 03:55:08Z

1

if you are using ng-repeat then you can use $index as the unique identifier for those div... just update your code like below:

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

and broadcast the event with identifier

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

if the divs are not part of ng-repeat, then you will need to have some kind of identifier to identify which div to destroy...

answered Jul 13, 2014 at 3:55

harishr

18.1k9 gold badges84 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Noor Over a year ago

so, I understand, I should replace scope: {identifier : '@'} where @ with an identifier

harishr Over a year ago

whereever you are using this directive you need to pass identifier with it: <event-view identifier="{{$index}}"></event-view>

Noor Over a year ago

in the link function, function(scope, element){ scope.$on("$destroy" + identifier,function() { element.remove(); }); I'm getting an error that identifier doesn't exist

Noor Over a year ago

identifier is a value which I'll be keeping in a scope variable, the issue is that whenever i update the scope identifier, it is updating in all directives scopes

harishr Over a year ago

use isolate scope, like the one in my example.. to keep separate instance for each directive... also you are getting that error because i guess you have not added the isolate scope..

|

Collectives™ on Stack Overflow

Angular remove Element

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related