angularjs - 为什么我的 ng-include 在 ui-view 中调用时不会加载模板？

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 的模板将无法加载。有什么原因吗？

Answer 1

ng-includes 在 templateUrl 内工作正常。

尝试this Plnkr或Plnkr with state: views这证明了这一点

说明如下

使用 templateUrl 进行路由

这是在具有templateUrl:route1.html的route1中

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

或者根据你所拥有的状态 View

       .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('dashboard') 看起来有所不同。您可能想按如下方式修复您的问题。添加大括号 {}。更新:coffeescript 语法看起来不错，但是我下面的纯 JS 代码运行没有任何问题。

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