Javascript AngularJS自定义指令替换HTML

home.html

<videodata></videodata>

指令.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>');

        }
    };
});

指令-myApp.directive（'videodata'，function（）{ 返回{ 限制：“EA”， 范围：正确， 链接：函数（范围、元素、属性）{ 元素。替换为（“”）+ ' '+ ''); } }; }); 上面的代码有效，下面是呈现的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>   

代码与

元素一起工作。replaceWith

但是这是正确的吗 使用自定义指令替换HTML的方法

如何使用

transclude:true，

属性来替换 HTML

另外，我使用的是

范围.cameraRTSPUrl

值内的

链接

函数。

最好的方法是使用模板
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>'
        }
    };
});

模板：“名称：{{customer.Name}}地址：{{customer.Address}”
myApp.directive（'videodata'，function（））{
返回{
限制：“EA”，
范围：正确，
链接：函数（范围、元素、属性）{
模板：“”+
' '+
''
}
};
});

最好的方法是使用模板
模板：“名称：{{customer.Name}}地址：{{customer.Address}”
myApp.directive（'videodata'，function（））{
返回{
限制：“EA”，
范围：正确，
链接：函数（范围、元素、属性）{
模板：“”+
' '+
''
}
};
});

代码与

元素一起工作。replaceWith

但是这是使用自定义指令替换HTML的正确方法吗

没有。这或多或少是最糟糕的错误方式，因为它阻止了任何角度数据或事件绑定，或者实际上是任何其他值得使用角度的原因；您正在将一团未编译的HTML转储到Angular并不真正了解的页面中

您永远不希望直接在Angular中修改DOM。如果您直接修改DOM，那么您添加的几乎总是首先是

$compile

d，这样Angular就可以在其中找到任何数据或事件绑定。（有经验的角度开发人员可能会对我使用“从不”一词表示异议）。诚然，在某些情况下，此建议并不适用，但作为Angular开发人员的新手，您在相当长的一段时间内不太可能遇到他们。最佳做法是让Angular完成工作，直到您对其所做的有了充分的了解。然后仍然让Angular完成大部分工作，因为这是它擅长的。）

对于您的示例，按照您的操作方式，

ng hide

不起作用，如果

scope.cameratspurl

的值发生更改，则该更改将不会反映在UI中。相反，请使用指令模板或

模板URL

，以便访问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的指令（来自其他地方的部分是“Transclude”位；Transclude指令是该transcluded html的包装器）

代码与

元素一起工作。replaceWith

但是这是使用自定义指令替换HTML的正确方法吗

没有。这或多或少是最糟糕的错误方式，因为它阻止了任何角度数据或事件绑定，或者实际上是任何其他值得使用角度的原因；您正在将一团未编译的HTML转储到Angular并不真正了解的页面中

您永远不希望直接在Angular中修改DOM。如果您直接修改DOM，那么您添加的几乎总是首先是

$compile

d，这样Angular就可以在其中找到任何数据或事件绑定。（有经验的角度开发人员可能会对我使用“从不”一词表示异议）。诚然，在某些情况下，此建议并不适用，但作为Angular开发人员的新手，您在相当长的一段时间内不太可能遇到他们。最佳做法是让Angular完成工作，直到您对其所做的有了充分的了解。然后仍然让Angular完成大部分工作，因为这是它擅长的。）

对于您的示例，按照您的操作方式，

ng hide

不起作用，如果

scope.cameratspurl

的值发生更改，则该更改将不会反映在UI中。相反，请使用指令模板或

模板URL

，以便访问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的指令（来自其他地方的部分是“Transclude”位；Transclude指令是该Transclude html的包装器。）

使用

替换：true

并在返回对象中使用

模板：

。这可能会有帮助。对不起，我没有得到你想要的。为了超越指令的内部html，还需要在模板中设置

transclude:true

并使用

ng transclude

指令。请解释一下。我能够达到预期的效果，但我想知道达到同样效果的最佳方法