组件类型角度指令 ng 模板

Component type angular directive ng-template

本文关键字：ng 模板 指令 类型 组件      更新时间：2023-09-26

在下面的代码中，

<!DOCTYPE html>
    <html>
        <head>
            .....
        </head>
        <body ng-app="app">
            <script type="text/ng-template" id="my-info-msg.html">
                <strong>{{o.msg}}</strong>
            </script>
            <div ng-controller="emp as o">
                <div my-info-msg>
                </div>  
            </div>
        </body>
    </html>

var app = angular.module("app", []);
function MyController(){
    this.msg= 'This is a message';
}
app.controller('emp', MyController);

function MsgDirective(){
    return{
        template1Url: "my-info-msg.html"
    };
}
app.directive('myInfoMsg', MsgDirective);

自定义指令 my-info-msg 不会在 <div my-info-msg> </div> 中添加模板<strong>{{o.msg}}</strong>。

请帮助我!!

正如@emil.c所指出的。您的代码中有拼写错误：

templateUrl: "my-info-msg.html"

当您从template1Url中删除"1"时，它工作正常。

https://plnkr.co/edit/Q20v7zSHHVPNJOOievrm?p=preview

template1Url 中有一个错别字，删除 template 和 Url 之间的1，你应该没问题。

相关文章：