Angular.js 中的嵌套视图模板？答案

【问题标题】：Nested view templates in Angular.js?Angular.js 中的嵌套视图模板？
【发布时间】：2015-10-13 21:55:11
【问题描述】：

我的 html 文件中有这部分 html 代码，它会重复多次（我的 html 文件中有多个表...）

                <table>
                    <thead>
                      <tr>
                          <th data-field="id">Vorname</th>
                          <th data-field="name">Nachname</th>
                          <th data-field="price">Anzahlaktien</th>
                          <th data-field="action">Wert</th>
                          <th data-field="action">Einkaufsdatum</th>
                          <th data-field="action">Ort</th>
                          <th data-field="action">Aktion</th>
                      </tr>
                    </thead>

                    <tbody> // different data

是否可以在 angular.js 中将其设置为“局部视图”？（就像在meteor.js中一样）所以我可以将它包含在它需要的地方{{myView}} ...

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您可以使用 ng-include 来包含您的 html 部分文件。顺便说一句，有很多方法可以做到这一点，并且使用带有自己的指令 templateUrl 是（我认为）最好的方法。

ngInclude doc

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

directive doc

HTML：

<my-directive></my-directive>

JS：

.directive('myDirective', function() {
  return {
    templateUrl: 'partial.html'
  };
});

【讨论】：

由于指令的最佳用途是为元素赋予行为，我完全不同意这是一个指令用例这一事实。 ng-include 可能是最好的方法。 @user3037960 如果您需要在桌子上使用不同的控件，您还可以在每个包含上使用 ng-controller 提供不同的控制器。
我同意@Okazari，但我不知道他/她与部分html文件有什么关系，所以如果可能的话，我想提供更多选择。
没有问题，只是提供有关最佳实践的更多信息。

【解决方案2】：

您能否将您的应用程序抽象为组件而不是视图？我相信 Angular 不是关于视图，而是关于组件。考虑视图可以更好地与命令式框架保持一致，但在角度方面效果不佳。将组件定义为指令，将对象传递到组件中，使用范围内的简单对象或单个变量显式管理视图状态。 Angular 的核心是声明性和数据驱动的。这是我的看法。

但是，如果您严格需要嵌套视图，您可能会发现 UI-Router 很有趣。正如克雷格在他的文章中解释的那样，

UI-Router 在传统路由器之上引入了状态机设计模式抽象。

什么是有趣的方法。最终这将变得如此简单

<!-- Home page view (templates/shows.html)-->
<ul>
    <li ui-sref-active="selected" ng-repeat="show in shows">
        <!-- Calling another view, after declaring it as state route --> 
        <a ui-sref="shows.detail({id: show.id})">{{show.name}}</a>
    </li>
</ul>
<div class="detail" ui-view></div>

将被嵌套的视图：

<!-- Shows detail view (templates/shows-detail.html) --> 
<h3>{{selectedShow.name}}</h3>
<p>
    {{selectedShow.description}}
</p>

以及绑定所有这些的配置：

app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/shows');

$stateProvider
    .state('shows', {
        url:'/shows',
        templateUrl: 'templates/shows.html',
        controller: 'ShowsController'
    })
    .state('shows.detail', {
        url: '/detail/:id',
        templateUrl: 'templates/shows-detail.html',
        controller: 'ShowsDetailController'
    });
}]);

最后，我认为这种方法会奏效。希望它有所帮助;-)

参考文献

【讨论】：