AngularJS自定義指令替換HTML

Question

home.html

<videodata></videodata>

videoctrl.js

$rootScope.cameraRTSPUrl = obj.objUrl;

指令

directive - myApp.directive('videodata', function() {
    return {
        restrict: 'EA',
        scope : true ,
        link: function(scope, element, attrs) {

            element.replaceWith('<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" '+
                                    'codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" '+
                                    'id="vlc" events="True"> '+
                                    '<embed id="123" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" '+
                                    'loop="no" width="800" height="600" target="'+scope.cameraRTSPUrl+'"> '+
                                '</object>');

        }
    };
});

上面的代碼有效，呈現的HTML在下面

    <object events="True" id="vlc" 
        codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" 
        classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921">
        <embed width="800" height="600" target="rtsp://localhost/media/media.amp" loop="no" autoplay="yes" 
        version="VideoLAN.VLCPlugin.2" type="application/x-google-vlc-plugin" id="123">
    </object>   

1. 該代碼可與element.replaceWith但這是使用自定義指令替換HTML的正確方法嗎？
2. 我如何使用transclude: true,屬性來替換HTML？

PS我在link函數內使用scope.cameraRTSPUrl值。

Answer 1

該代碼可與element.replaceWith但這是使用自定義指令替換HTML的正確方法嗎？

不。 這或多或少是最壞的可能的錯誤方法，因為它阻止了任何Angular數據或事件綁定，或者實際上阻止了Angular值得使用的任何其他原因。 您會將一堆未編譯的HTML轉儲到Angular並不真正了解的頁面中。

您永遠不想直接在Angular中修改DOM。 如果您確實直接修改了DOM，則添加的內容幾乎總是應該先$compile d，以便Angular可以在其中找到任何數據或事件綁定。 （經驗豐富的Angular開發人員可能會對我使用“從不”一詞表示質疑。的確，在某些情況下，此建議並不適用，但是作為Angular的新開發人員，您不太可能會遇到這種情況最好的做法是讓Angular進行工作，直到您對它的工作有一個很好的了解為止。然后仍然讓Angular進行大部分工作，因為這就是它的長處。）

在您的示例中，執行此操作的方式， ng-hide無法正常工作，並且如果scope.cameraRTSPUrl的值發生更改，則該更改將不會反映在UI中。 而是使用指令template或templateUrl ，這樣您就可以訪問Angular的數據綁定：

myApp.directive('videodata', function() {
    return {
        restrict: 'EA',
        scope : true,
        replace: true,
        templateUrl: 'templates/foo.html',
        link: function(scope, element, attrs) {
            scope.cameraRTSPUrl = "someGeneratedValue.mov"; // could passed into the directive via an attribute or parent data binding, for example
        }
    };
});

foo.html：

<div ng-hide="StartPlay" id="streamingarea">
    <object events="True" id="vlc" codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" 
        classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921">
        <embed width="800" height="600" target="{{cameraRTSPUrl}}" loop="no" autoplay="yes" 
        version="VideoLAN.VLCPlugin.2" type="application/x-google-vlc-plugin" id="123">
    </object>   
</div>

現在，您只需更改scope.StartPlay的真實性即可觸發ng-hide ，並且對scope.cameraRTSPUrl更改將自動顯示在DOM中。

如何使用transclude: true ，屬性來替換HTML？

這算不上什么transclude是。 Transclude允許您創建包含不是從該指令內部生成的html的指令（來自其他位置的部分是“ transcluded”位； transclude指令是圍繞該transcluded html的包裝器。）

Answer 2

Best way is to use template

template: 'Name: {{customer.name}} Address: {{customer.address}}'

 myApp.directive('videodata', function() {
    return {
        restrict: 'EA',
        scope : true ,
        link: function(scope, element, attrs) {
        template: '<object classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921" '+
                                    'codebase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" '+
                                    'id="vlc" events="True"> '+
                                    '<embed id="123" type="application/x-google-vlc-plugin" version="VideoLAN.VLCPlugin.2" autoplay="yes" '+
                                    'loop="no" width="800" height="600" target="'+scope.cameraRTSPUrl+'"> '+
                                '</object>'
        }
    };
});