Question

我试图了解如何使用ui-router视图。这是我到目前为止所做的：

var rootSubjectsSubjectAdminWordsWord = {
    name: 'r.s.s.a.w.w',
    template: '<div ui-view ></div>',
    url: '/:wordId',
};

var rootSubjectsSubjectAdminWordsWordDelete = {
    name: 'r.s.s.a.w.w.delete',
    templateProvider: ['$templateCache', ($templateCache) => {
        return $templateCache.get('/app/admin/word/word.html');
    }],
    url: '/delete',
};

/app/admin/word/word.html

<div>
    <ng-include src="'/app/admin/word/wordData.html'"></ng-include>
    <ng-include src="'/app/admin/word/wordForms.html'"></ng-include>
</div>

我想要做的是取消使用word.html的必要性。

有没有办法可以让模板'<div ui-view ></div>'接受这两个HTML 文件以某种方式命名视图？

Answer 1

这是每UI Router Docs。基本上定义视图对象的位置是您将视图命名并将其指向该视图的位置（请参阅＃1）。之后路由器将处理剩下的事情。

$stateProvider
  .state('report', {
    views: {
      //(#1)--here is the named router matching in the html.
      'filters': {
        templateUrl: 'report-filters.html',
        controller: function($scope) {...controller stuff just
          for filters view...
        }
      },
      'tabledata': {
        templateUrl: 'report-table.html',
        controller: function($scope) {...controller stuff just
          for tabledata view...
        }
      },
      'graph': {
        templateUrl: 'report-graph.html',
        controller: function($scope) {...controller stuff just
          for graph view...
        }
      }
    }
  });

<body>
  <div ui-view="filters"></div>
  <div ui-view="tabledata"></div>
  <div ui-view="graph"></div>
</body>

如何使angular-ui-router模板接受两个视图？

1 个答案: