将指令应用于特定的Div

时间:2016-08-12 11:19:54

标签: javascript angularjs angularjs-directive vlc

控制

$('#resultati').css("top", "16%");

HTML

angular.element(document.querySelector('#divStreamingAreaPlayback' + pictureboxIndex)).append($compile("<vlc-object name= 'fname'></vlc-object>")($scope));

指令

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

});

当选择第一个div时,我们传递id 01,下面是输出

myApp.directive('vlcObject', function ($compile, $rootScope,$timeout) {
var linker = function (scope, element, attrs) {
        var vlcPlayerTemplate =

            '<object id="vlc'+'{{name}}" classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" width="100%" height="100%">' +
            '<embed type="application/x-vlc-plugin" name="vlc'+'{{name}}" autoplay="yes" toolbar="false" width="100%" height="100%" target="' + $rootScope.rtspUrl + '"></embed>' +
            '</object>';
        element.html(vlcPlayerTemplate);
        $compile(element.contents())(scope); 
    });

};
return {
    restrict: "EA",
    scope: { name: '='},
    replace: true,
    link: linker


};

当选择第二个div时,第一个div id被第二个div id替换,如下所示

<vlc-object name="fname" class="ng-scope ng-isolate-scope">
<object width="100%" height="100%" classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" id="vlcdivPictureBoxPlayback01" class="ng-scope">
<embed width="100%" height="100%" target="rtsp://media.smart-streaming.com/mytest/mp4:sample.mp4" toolbar="false" autoplay="yes" name="vlcdivPictureBoxPlayback01" type="application/x-vlc-plugin"></object></vlc-object>

正如您所看到的,所有div id都被替换为最后一个id。如何将指令应用于特定div并跳过那些已经应用指令的人?

0 个答案:

没有答案