Vahid Alvandi Vahid Alvandi - 19 days ago 6
AngularJS Question

best way in remove directive by unique id in angularjs

i have simple directive that create a text, after click to add buttom.
and after click to each directive remove and destroy directive properly.


but i need delete all directive after selected.


for example i clicked to add button for 5 step and result same bellow

Directive content
Directive content
Directive content
Directive content
Directive content


i need click to item 2 then remove and destroy scope of item 3,4,5

another question is , can i delete directive by spsephic id ?

<body ng-app="app">
<div ng-controller="MainController">
<button ng-click="Stage()">{{stage}}</button>

<div class="my-directive-placeholder"></div>
</div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script>
var app = angular.module('app', []);
app.controller('MainController', function($scope, $compile, $element){
$scope.stage = 'Add';
var childScope;




$scope.Stage = function(){
childScope = $scope.$new();
var el = $compile( "<b my-directive></b>" )(childScope);
$('.my-directive-placeholder').append(el);
}
})




app.directive('myDirective', function($interval){
return {


template: 'Directive content<br>',


link: function(scope, element, attrs){

element.on('click', function () {
scope.$destroy();
element.remove();
});


scope.$on('$destroy', function(){
console.log('destroid');
});
}
}
});

</script>


https://jsfiddle.net/0vucwqrc/

Answer

Instead creating html on compile time, may be its better to have dedicated directive for this like, See if this fits your requirment

angular.module('MyApp', [])

angular.module('MyApp')
  .controller("DirectivePageController",
    function() {

      var self = this;

      self.fields = [{
        Name: 'Directive1'
      }];


      self.newField = function() {
        self.fields.push({
          Name: ('Directive' + (self.fields.length + 1))
        });
      };

      self.removeField = function(field) {
        var index = self.fields.indexOf(field);
        if (index >= 0) {
          self.fields.splice(index, 1);
        }
      };
    })
  .controller("appDirectiveController", ['$scope', '$attrs',
    function($scope, $attrs) {
      var self = this;
      var directiveScope = $scope.$parent;
      self.options = directiveScope.$eval($attrs.model);
      self.onOk = function() {
        alert(JSON.stringify(self.options) + ' button clicked');
      }
    }
  ])
  .directive('appDirective', function($compile) {
    return {
      transclude: true,
      template: '<div ng-click="dirCtrl.onOk()" type="">{{type|uppercase}}</div>',
      scope: {
        index: '@',
        type: '@'
      },
      restrict: 'E',
      replace: true,
      controller: 'appDirectiveController',
      controllerAs: 'dirCtrl',
    }
  })
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<body>
  <div ng-app="MyApp">
    <div ng-controller="DirectivePageController as pageCtrl">
      <span><a href="" ng-click="pageCtrl.newField()">Add Button</a></span>
      <div ng-repeat="field in pageCtrl.fields track by $index">
        <app-directive type="{{field.Name}}" model="field">
        </app-directive>
        <a href="" ng-click="pageCtrl.removeField(field)">Remove</a>
      </div>
    </div>
  </div>
</body>

</html>

Comments