ng-transclude 在我的模板中不能作为插入点答案

【问题标题】：ng-transclude don't work as insertion point in my templateng-transclude 在我的模板中不能作为插入点
【发布时间】：2015-09-04 08:53:53
【问题描述】：

我是角度指令模块的新手。

如果我在指令定义中使用 transclude，并将其设置为 true，我实际上可以在编译时在指令模板中添加一个额外的 html 模板。

请按照下面的代码，

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Chapter-01 example 15</title>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\AngularJS\angular.js"></script>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\jQuery\jquery-1.11.1.js"></script>
    <script type="text/javascript" src="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\js\bootstrap.js"></script>
    <link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap.css"></link>
    <link rel="stylesheet" href="D:\Rahul Shivsharan\JavaScript-Framework\BootstrapCSS\bootstrap-3.2.0-dist\css\bootstrap-theme.css"></link>
    <script type="text/javaScript">
        angular.module("MyApp",[]);
        (function(){
            angular.module("MyApp").controller("MyCtrl",MyCtrl);
            angular.module("MyApp").directive("simpleDirective",simpleDirective);

            function MyCtrl($scope){
                $scope.myCtrlObj = new Object();                    
                $scope.myCtrlObj.localName = "John Wayne";
                $scope.myCtrlObj.petName = "Johny";
            };

            function simpleDirective(){
                var templatStr = "<div class='alert alert-warning'>"+
                                        "<h3>This is Toggle Example....</h3>" +
                                        "<h2><strong>{{myCtrlObj.localName}}</strong></h2>"+                                            
                                  "</div>";
                return {
                    restrict : "EA",
                    template : function(tElem,tAttr){
                        return templatStr;
                    },  
                    replace : true,
                    transclude : true ,
                    link : function(scope,elem,attr,controller,transcludeFn){                           

                        scope.myCtrlObj.localName = "Leonardo Di Caprio";
                        scope.myCtrlObj.petName = "Leo";

                        scope.showMe = function(){
                            if (elem.hasClass("alert-success") === true){
                                elem.removeClass("alert-success");
                                elem.addClass("alert-warning");
                            }else{
                                elem.removeClass("alert-warning");
                                elem.addClass("alert-success");
                            }                               
                        };

                        var clonedElement = transcludeFn(function(clone){                               
                            return clone;
                        });

                        elem.append(clonedElement); 
                    }                       
                }
            }
        })();
    </script>
</head>
<body>
    <div ng-app="MyApp" ng-controller="MyCtrl" class="container">
        <div class="page-header">
            <h3>This is Directive Practise</h3>
        </div>
        <div class="row">
            <div class="col-md-4">                  
                <input type='button' class='btn btn-primary' value="Click-Me" ng-click='showMe()' />                                                                        
            </div>          
        </div>
        <div class="row" style="margin-top:2%">
            <div class="col-md-4">
                <div simple-directive>
                    <span>His real Name is : <b>{{myCtrlObj.localName}}</b><span>
                    <br/>
                    <span>His pet name is : <b>{{myCtrlObj.petName}}</b></span>
                </div>
            </div>
        </div>  
    </div>
</body>

效果很好，我正在用上面的代码粘贴工作示例的链接 Working example of above code

现在我对上面的代码做一些修改，比如，

改变链接功能如下，

                   link : function(scope,elem,attr,controller){                         

                        scope.myCtrlObj.localName = "Leonardo Di Caprio";
                        scope.myCtrlObj.petName = "Leo";

                        scope.showMe = function(){
                            if (elem.hasClass("alert-success") === true){
                                elem.removeClass("alert-success");
                                elem.addClass("alert-warning");
                            }else{
                                elem.removeClass("alert-warning");
                                elem.addClass("alert-success");
                            }                               
                        };
                    }

在上面的代码中，我删除了从 tranclude 函数返回的克隆附加到元素。

并将 ng-transclude 添加到模板中，如下所示，

                         var templatStr = "<div class='alert alert-warning'>"+
                                        "<h3>This is Toggle Example....</h3>" +
                                        "<h2><strong>{{myCtrlObj.localName}}</strong></h2>"+
                                        "<ng-transclude></ng-transclude>" + 
                                  "</div>";

通过进行上述所有更改，不会附加 html 模板。

Please click on the link for the ng-transclude example

我读到的是，如果我们在模板中使用ng-transclude，我们不需要在链接中编写transclude函数，

如果是，为什么我的第二个示例不起作用。

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

您需要更改以下内容

<ng-transclude></ng-transclude>

到

<div ng-transclude></div>

它会起作用。原因是您使用的 Angular 版本不支持使用 ng-transclude 作为元素。

【讨论】：