Question

home.html的

<videodata></videodata>

videoctrl.js

$rootScope.cameraRTSPUrl = obj.objUrl;

directive.js

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>

代码适用于element.replaceWith，但这是正确的使用自定义指令替换HTML的方法？
如何使用transclude: true,属性来替换我的。{li> HTML？

P.S。我在scope.cameraRTSPUrl函数中使用link值。

Answer 1

代码与element.replaceWith一起使用，但这是使用自定义指令替换HTML的正确方法吗？

不。它或多或少是最糟糕的错误方式，因为它可以防止任何Angular数据或事件绑定或者Angular值得使用的任何其他原因;你将一大堆未编译的HTML转储到Angular并不真正了解的页面中。

您永远不想直接在Angular中修改DOM。如果您直接修改DOM，那么您添加的内容几乎总是$compile d，因此Angular可以在其中找到任何数据或事件绑定。（经验丰富的Angular开发人员可能会对我使用“34”这个词有疑问;从来没有＆＃34;。在某些情况下，这个建议并不适用，但作为一个新的 - Angular开发人员很可能会在很长一段时间内遇到它们。最好的做法是让Angular完成工作，直到你很好地理解它做了什么为止。然后仍然让Angular做大部分工作。工作，因为这是它擅长的。）

对于您的示例，您执行此操作的方式，ng-hide将无效，如果scope.cameraRTSPUrl的值发生更改，则该更改将不会反映在UI中。相反，请使用指令模板或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>

现在，您只需更改ng-hide的真实性即可触发scope.StartPlay，对scope.cameraRTSPUrl的更改将自动显示在DOM中。

如何使用transclude: true属性来替换我的HTML？

那不是transclude的真正含义。 Transclude允许您创建包含未在该指令中生成的html的指令（来自其他地方的部分是＆＃34; transcluded＆＃34; bit; transclude指令是转换的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>'
        }
    };
});

AngularJS Custom Directive取代HTML

2 个答案: