AngularJS – 在其他部分内动态使用Partials

我对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可以是处理图像库的部分模板。

任何输入或方向将非常感谢！

有几种方法可供您使用。

你最好的办法是添加自己的directive.展开你的例子：

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

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

<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指令。这是一个部分的简单的互斥，区别在于被转录的部分生活在与它包含的上下文相同的范围内。

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

在上面的情况下，Angular将在URL处转义$ scope.module.partialUrl处的partial。 (编辑：这意味着您可以通过替换ngInclude使用的作用域变量来动态替换UI)Awesome，right？

如果您只是重复使用相同的部分以避免重复的代码，则只需用单引号括住网址：

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

AngularJS – 在其他部分内动态使用Partials

相关文章