Question

我的routes文件如下：

.state('dashboard', {
  url: '/dashboard'
  views:
    appView:
      templateUrl: '/templates/main.html'
    dashboardView:
      templateUrl: '/templates/partialDashboard.html'
}).

main.html看起来像：

<section class='main-page container'>
  <div class="row">
    <div class="col-md-3 lnHeaderArea">
      <ng-include src="'/templates/companyHeader.html'"></ng-include>
    </div>
    <div id="main-area" class="col-md-9">
      <div ui-view="dashboardView"></div>
      <ng-include src="'/templates/dashboardFooter.html'"></ng-include>
    </div>
  </div>
</section>

和partialDashboard.html看起来像：

<section ng-controller="DashboardController">
  <ng-include src="'/templates/dashboardInstitutionalDemand.html'"></ng-include>
  <ng-include src="'/templates/dashboardPriceVolume.html'"></ng-include>
  <ng-include src="'/templates/dashboardBlockExecutions.html'"></ng-include>
  <ng-include src="'/templates/dashboardAnalytics.html'"></ng-include>
</section>

但由于某些原因，这些ng-include'd模板将无法加载。有什么理由吗？

Answer 1

ng - 包含在templateUrl中正常工作。

尝试展示

的this Plnkr或Plnkr with state: views

解释如下

使用templateUrl路由

这是在路由1中有templateUrl: route1.html

 $stateProvider
        .state('route1', {
          url: "/route1",
          templateUrl: "route1.html"
        })
        .state('route1.list', {
          url: "/list",
          templateUrl: "route1.list.html",
          controller: function($scope) {
            $scope.items = ["A", "List", "Of", "Items"];
          }
    })

或根据您所拥有的状态视图

       .state('main', {
            url: '/main',
            views: {
                'route1': { 
                  templateUrl: "route1.html" 
                },
                'route2': { 
                  templateUrl: "route2.html" 
                },
            }
        })

包含ng-include -route1.html 的模板请注意myNgIncludeSample.html

  <h1>Route 1</h1>
   <hr/>
     <div ng-include="'myNgIncludeSample.html'">
      </div>
   <hr/>
   <a href="#/route1/list">Show List</a>
   <div ui-view></div>

我发现您的.state（＆＃39;仪表板＆＃39;）看起来不同。您可能想要修复如下。添加那些卷曲的{}大括号。更新：coffeescript语法似乎很好但是我的以下纯JS代码工作没有任何问题。

  .state('dashboard', {
      url: '/dashboard'
      views: {
        'appView': {
            templateUrl: '/templates/main.html'
         },
        'dashboardView': {
            templateUrl: '/templates/partialDashboard.html'
         }
   }).

希望这有帮助。

Answer 2

ui-view是终端指令，不能在其中放置ng-includes。您需要通过嵌套在<{1}}声明中定义这些模板：

$state

在ui-view中调用时，为什么不能使用ng-include的加载模板？

2 个答案: