文章/答案/技术大牛

发布

社区首页 >问答首页 >请不要在我的模板中充当插入点。

问请不要在我的模板中充当插入点。
EN

Stack Overflow用户

提问于 2015-09-04 08:53:53

回答 1查看 146关注 0票数 0

我是新来的角指令模块。

如果在指令定义中使用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>

它工作得很好，我正在用上面的代码上述代码的工作示例粘贴工作示例的链接。

现在我在上面的代码中做了一些修改，

更改链接函数如下，

                   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模板。

请单击ng-transclude示例的链接。

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

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

angularjs

angularjs-directive

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-09-04 10:27:38

您需要更改以下内容

<ng-transclude></ng-transclude>

至

<div ng-transclude></div>

而且它会成功的。原因是您使用的棱角版本不支持使用ng-transclude作为元素。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/32393968

复制

相似问题

问请不要在我的模板中充当插入点。
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问请不要在我的模板中充当插入点。EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问请不要在我的模板中充当插入点。
EN