AngularJS - 在其他部分中动态使用部分动作

我对AngularJS相对较新，想知道动态拉入部分模板的可行性。考虑这个抽象（并且为这个例子简化）模块。这本身将是一个将在整个应用程序中重用的部分模板。AngularJS - 在其他部分中动态使用部分动作

偏模块标记

<div class="module"> 
    <h2 class="module-title">{{module.title}}</h2> 

    <div class="module-content"> 
     {{module.content}} 
    </div> 

</div>

取一些数据客户端后，我可能想要module.content是简单的文本串，没有问题出现。根据我正在使用的数据，如果我可以动态地将其他部分模板插入到module.content中，将会非常有用。例如，在我的回复中，我有一个我希望显示的标题列表，是否可以拉入处理标题的部分模板？而在另一个地方，module.content可能是处理图片库的部分模板。

任何输入或方向将不胜感激！

来源

2012-10-04 greaterweb

有几种方法可供您使用。

最好的选择是添加自己的directive。扩展你的例子：

module.directive('myModule', function() { 
    return { 
    restrict: 'A', 
    scope : { 
     title : '@' 
    }, 
    templateUrl : '/partial/module.html', 
    transclude : true 
    }; 
});

我们将使用transclusion使内容更灵活。现在部分：

<div class="module"> 
    <h2 class="module-title">{{title}}</h2> 

    <div class="module-content" ng-transclude></div> 
</div>

在安装了此指令，可以使用下面的HTML：

<div my-module title="{{module.title}}"> 
    {{module.content}} 
</div>

另一种选择是使用ng-include指令。这是一个局部的简单transclusion，不同之处是在相同的范围内transcluded部分生命作为上下文它被列入英寸

<div ng-include="module.partialUrl"></div>

在上述情况下，角将transclude部分在URL处$scope.module.partialUrl。（编辑：这意味着你可以通过替换ngInclude使用的作用域变量来动态地替换掉UI。真棒吧？）

如果你只是重复使用相同的部分以避免重复的代码，那么只需将URL报价：

<div ng-include="'/partial/foo.html'"></div>

来源

2012-10-04 22:34:49 qualidafial

谢谢您提供的信息丰富的回复！今晚我会玩这个，让你知道我是怎么做出来的。 'module.content'部分可以改变，所以我将不得不去自定义指令（或两个）的路线。 – greaterweb

我已经走了自定义指令的方式，并已能够完成我所需要的，感谢您的帮助！ – greaterweb

+ for“用单引号括起URL” – Jackson

AngularJS - 在其他部分中动态使用部分动作

回答

相关问题