AngularJS - 刪除一個元素使用$編譯（指令）

Question

指令創建

myApp.directive('vlcControls', function ($compile, $rootScope,$timeout) { 
    var linker = function (scope, element, attrs) { 
     $timeout(function() { 
      var vlcPlayerTemplate = 
       '<button class="btn btn-default btn-sm margin-r-10 text-center"><i class="fa fa-backward"></i></button>'+ 
       '<button class="btn btn-default btn-sm margin-r-10 text-center"><i id="play-pause" class="fa fa-play"></i></button>'+ 
       '<button class="btn btn-default btn-sm margin-r-10 text-center"><i class="fa fa-forward"></i></button>'; 
      element.html(vlcPlayerTemplate); 
      $compile(element.contents())(scope); 
     });   
    }; 
    return { 
     restrict: "E", 
     replace: true, 
     link: linker 
    }; 
}); 

Ctrl鍵

this.myService = function (pictureboxIndex) { 
angular.element(document.querySelector('#cameraControls')).append($compile("<vlc-controls></vlc-controls>")($rootScope)); 
}; 

HTML

<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" id="cameraControls"></div> 

輸出

<vlc-controls class="ng-scope"><button class="btn btn-default btn-sm margin-r-10 text-center ng-scope"><i class="fa fa-backward"></i></button><button class="btn btn-default btn-sm margin-r-10 text-center ng-scope"><i class="fa fa-play" id="play-pause"></i></button><button class="btn btn-default btn-sm margin-r-10 text-center ng-scope"><i class="fa fa-forward"></i></button></vlc-controls> 

<vlc-controls class="ng-scope"><button class="btn btn-default btn-sm margin-r-10 text-center ng-scope"><i class="fa fa-backward"></i></button><button class="btn btn-default btn-sm margin-r-10 text-center ng-scope"><i class="fa fa-play" id="play-pause"></i></button><button class="btn btn-default btn-sm margin-r-10 text-center ng-scope"><i class="fa fa-forward"></i></button></vlc-controls> 

如何刪除/刪除以前的/重複的元素，只追加了最新的？

Answer 1

使用.empty，你可以從ID cameraControls

var elmnt = angular.element(document.querySelector('#cameraControls')); 
elmnt .empty();