Angularjs:嵌入指令模板 [英] Angularjs: transclude directive template

问题描述

如何在以下情况下使用嵌入.目的是在 html(部分)文件中使用标记，而不是在模板中(在指令内)定义它.

我在这里找到了一个很棒的树指令.(来源)原文:http://jsfiddle.net/n8dPm/

我没有在指令中定义模板，而是尝试使用嵌入的内容.我还将 Angular 更新为 1.2.0.rc2.更新:http://jsfiddle.net/aZx7B/2/

出现以下错误

<块引用>

TypeError: 对象 [object Object] 的属性 '$transclude' 不是一个功能

代码:

module.directive("tree", function($compile) {返回 {限制:E"，转置:真实，范围:{家庭:'='}，模板:'
'+'<li ng-transclude></li>'+'<li ng-repeat="child in family.children">'+'<tree family="孩子"></tree>'+'</li>'+'</ul>',编译:函数(tElement，tAttr){var 内容 = tElement.contents().remove();var 编译内容；返回函数(范围，iElement，iAttr){如果(！编译内容){编译内容 = $compile(contents);}编译内容(范围，功能(克隆，范围){iElement.append(clone);});};}};});<div ng-app="myapp"><div ng-controller="TreeCtrl"><树家庭=家庭"><p>{{family.name }}</p>

根据大卫的建议，做了一些改动.http://jsfiddle.net/aZx7B/3/现在，它打印出来，Parent.改变，family -> treeFamily 虽然没有工作

解决方案

您还需要在模板中输出族的名称:http://jsfiddle.net/roadprophet/DsvX6/

module.directive("tree", function($compile) {返回 {限制:E"，转置:真实，范围:{家庭:'='}，模板:'
'+'<li ng-transclude></li>'+'<li ng-repeat="child in family.children">'+'<tree family="child">{{family.name}}</tree>'+'</li>'+'</ul>',编译:函数(tElement，tAttr，transclude){var 内容 = tElement.contents().remove();var 编译内容；返回函数(范围，iElement，iAttr){如果(！编译内容){compiledContents = $compile(contents, transclude);}编译内容(范围，功能(克隆，范围){iElement.append(clone);});};}};});

编辑

您也可以通过这样做来简化:http://jsfiddle.net/roadprophet/DsvX6/2/

<div ng-controller="TreeCtrl"><tree family="treeFamily">

module.directive("tree", function($compile) {返回 {限制:E"，转置:真实，范围:{家庭:'='}，模板:'

'+'<li ng-transclude></li>'+'<p>{{family.name }}</p>'+'<li ng-repeat="child in family.children">'+'<tree family="孩子"></tree>'+'</li>'+'</ul>',编译:函数(tElement，tAttr，transclude){var 内容 = tElement.contents().remove();var 编译内容；返回函数(范围，iElement，iAttr){如果(！编译内容){compiledContents = $compile(contents, transclude);}编译内容(范围，功能(克隆，范围){iElement.append(clone);});};}};});

编辑虽然问题的根源相同.没有模板被传递给内部树指令.http://jsfiddle.net/roadprophet/DsvX6/3/

<div ng-controller="TreeCtrl"><tree family="treeFamily"><p>{{family.name }}</p>

模板:'

'+'<li ng-transclude></li>'+'<li ng-repeat="child in family.children">'+'<tree family="child"><div ng-transclude></div></tree>'+'</li>'+'</ul>'

How to use transclusion in the below case. The intention is to use markup in the html (partials) file, than defining it in template (within the directive).

I found a great tree directive here. (source) Original: http://jsfiddle.net/n8dPm/

Instead of defining the template in the directive, I was trying to use a transcluded content. I also updated Angular to 1.2.0.rc2. Updated: http://jsfiddle.net/aZx7B/2/

got below error

TypeError: Property '$transclude' of object [object Object] is not a function

code:

module.directive("tree", function($compile) {
    return {
        restrict: "E",
        transclude: true,
        scope: {family: '='},
        template:       
            '<ul>' + 
                '<li ng-transclude></li>' +
                '<li ng-repeat="child in family.children">' +
                    '<tree family="child"></tree>' +
                '</li>' +
            '</ul>',
        compile: function(tElement, tAttr) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                if(!compiledContents) {
                    compiledContents = $compile(contents);
                }
                compiledContents(scope, function(clone, scope) {
                         iElement.append(clone); 
                });
            };
        }
    };
});

<div ng-app="myapp">
    <div ng-controller="TreeCtrl">
        <tree family="family">
            <p>{{ family.name }}</p>
        </tree>
    </div>
</div>

Edit:

With David's suggestion, made some changes. http://jsfiddle.net/aZx7B/3/ now, it prints, Parent. changing, family -> treeFamily didn't work though

解决方案

You need to output the name of the family in the template as well: http://jsfiddle.net/roadprophet/DsvX6/

module.directive("tree", function($compile) {
    return {
        restrict: "E",
        transclude: true,
        scope: {family: '='},
        template:       
            '<ul>' + 
                '<li ng-transclude></li>' +
                '<li ng-repeat="child in family.children">' +
                    '<tree family="child">{{family.name}}</tree>' +
                '</li>' +
            '</ul>',
        compile: function(tElement, tAttr, transclude) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                if(!compiledContents) {
                    compiledContents = $compile(contents, transclude);
                }
                compiledContents(scope, function(clone, scope) {
                         iElement.append(clone); 
                });
            };
        }
    };
});

EDIT

You could also simplify by doing this: http://jsfiddle.net/roadprophet/DsvX6/2/

<div ng-app="myapp">
    <div ng-controller="TreeCtrl">
        <tree family="treeFamily">           
        </tree>
    </div>
</div>


module.directive("tree", function($compile) {
    return {
        restrict: "E",
        transclude: true,
        scope: {family: '='},
        template:       
            '<ul>' + 
                '<li ng-transclude></li>' +
                '<p>{{ family.name }}</p>' + 
                '<li ng-repeat="child in family.children">' +
                    '<tree family="child"></tree>' +
                '</li>' +
            '</ul>',
        compile: function(tElement, tAttr, transclude) {
            var contents = tElement.contents().remove();
            var compiledContents;
            return function(scope, iElement, iAttr) {
                if(!compiledContents) {
                    compiledContents = $compile(contents, transclude);
                }
                compiledContents(scope, function(clone, scope) {
                         iElement.append(clone); 
                });
            };
        }
    };
});

EDIT Same source of the problem though. No template being passed to the inner tree directive. http://jsfiddle.net/roadprophet/DsvX6/3/

<div ng-app="myapp">
    <div ng-controller="TreeCtrl">
        <tree family="treeFamily">           
                <p>{{ family.name }}</p>
        </tree>
    </div>
</div>

 template:       
            '<ul>' + 
                '<li ng-transclude></li>' +
                '<li ng-repeat="child in family.children">' +
                    '<tree family="child"><div ng-transclude></div></tree>' +
                '</li>' +
            '</ul>'

这篇关于Angularjs:嵌入指令模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！