最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - ng-transclude not working in template AngularJS - Stack Overflow

programmeradmin3浏览0评论

Sorry, if something stupid I am missing here, but I really tried various bos to make this code work, but no luck.

I am learning directive in AngularjS from Recipes with AngularJS but stuck at this code -

I believe it should print Heading before Hello World p text. but its not ing. Let me know what I am missing in my code -

PLNKR CODE

Code as a Whole -

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title>Directive Example</title>
    <script src=".2.10/angular.min.js"></script>
    <script>
        var myApp = angular.module("myApp", []);

        myApp.directive("myWidget", function(){
            return {
                restrict: "E",
                transclude: true,
                template: "<div ng-transclude><h3>Heading</h3></div>"
            };
        });
    </script>
</head>
<body>
    <my-widget>
        <p>Hello World!!</p>
    </my-widget>
</body>
</html>

Sorry, if something stupid I am missing here, but I really tried various bos to make this code work, but no luck.

I am learning directive in AngularjS from Recipes with AngularJS but stuck at this code -

https://github./fdietz/recipes-with-angular-js-examples/tree/master/chapter3/recipe4

I believe it should print Heading before Hello World p text. but its not ing. Let me know what I am missing in my code -

PLNKR CODE

Code as a Whole -

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8" />
    <title>Directive Example</title>
    <script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.10/angular.min.js"></script>
    <script>
        var myApp = angular.module("myApp", []);

        myApp.directive("myWidget", function(){
            return {
                restrict: "E",
                transclude: true,
                template: "<div ng-transclude><h3>Heading</h3></div>"
            };
        });
    </script>
</head>
<body>
    <my-widget>
        <p>Hello World!!</p>
    </my-widget>
</body>
</html>
Share Improve this question asked Sep 8, 2014 at 13:47 TrialcoderTrialcoder 6,01411 gold badges46 silver badges66 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 6

check the first "h3" before "div"

template: "<h3>Heading</h3><div ng-transclude></div>"

The reason you need to change the recipe is because Angular changed how transclusion works between v1.0 and v1.2.

With change eed299a3, Angular now "clears the translusion point before transcluding."

If you load v1.0 (which is what the github repository uses), you will see "Heading". With v1.2, you won't see "Heading", unless you modify the template the way @Noypi explained.

发布评论

评论列表(0)

  1. 暂无评论