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

Question

我的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}} ...

Answer 1

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

ngInclude文件

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

指令文件

HTML：

<my-directive></my-directive>

JS：

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

Answer 2

您可以将应用程序抽象为组件而不是视图吗？ 我相信Angular不是关于视图，而是关于组件。 关于视图的思考与命令性框架更好地匹配，但在角度上效果不佳。 将组件定义为指令，将对象传递到组件中，使用范围内的简单对象或单个变量显式管理视图状态。 Angular的核心是声明式和数据驱动。 那是我的意见。

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

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'
    });
}]);

最后，我认为这种方法将行得通。 希望能帮助到你 ;-）

参考文献

• 如何在AngularJS中进行嵌套视图（提示：不要）
• UI-Router：为什么许多开发人员不使用AngularJS的内置路由器
• 如何在AngularJS中设置嵌套视图？
• Github AngularUI路由器