【问题标题】: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'
        });
    }]);
    

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

    参考文献

    【讨论】:

      猜你喜欢
      • 2013-06-20
      • 2012-12-16
      • 1970-01-01
      • 2011-10-30
      • 1970-01-01
      • 1970-01-01
      • 2017-04-10
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多