Question

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

如果我在我的指令定义中使用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函数返回的clone的附加元素。

将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函数，

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

Answer 1

您需要更改以下内容

<ng-transclude></ng-transclude>

要

<div ng-transclude></div>

它会发挥作用。原因是您使用的角度版本不支持使用 ng-transclude 作为元素。

ng-transclude在我的模板中不能用作插入点

1 个答案: