Component type angular directive ng-template

411 Views Asked by At

In the below code,

<!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);

custom directive my-info-msg does not add the template <strong>{{o.msg}}</strong> in <div my-info-msg> </div>.

Please help me!!!

2

There are 2 best solutions below

0
A.Sharma On

As @emil.c has pointed out. You have a typo in your code:

templateUrl: "my-info-msg.html"

It works fine when you remove the "1" from your template1Url.

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

0
emil.c On

There's a typo in template1Url, remove the 1 between template and Url and you should be fine.