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

时间:2015-07-23 14:14:09

标签: javascript angularjs

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

是否可以将其设置为&#34;部分视图&#34;在angular.js? (比如在meteor.js中)所以我可以把它包含在需要的地方{{myView}} ...

2 个答案:

答案 0 :(得分: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'
  };
});

答案 1 :(得分:0)

您可以将应用程序抽象为组件而不是视图吗?我认为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'
    });
}]);

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

<强>参考