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

控制

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

AngularJS - 删除使用$ compile创建的元素（指令）

1 个答案: