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

My routes file looks like:

我的路线文件如下：

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

main.html looks like:

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>

and partialDashboard.html looks like:

和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>

But for some reason, those ng-include'd templates won't load. Any reason why?

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

2 个解决方案

#1

ng-includes work fine inside the templateUrl.

ng-includes在templateUrl中正常工作。

Try this Plnkr or Plnkr with state: views which demonstrates just that

试试这个Plnkr或Plnkr的状态：视图来证明这一点

Explanation is below

说明如下

Route using templateUrl

使用templateUrl进行路由

This is in the route1 which has templateUrl: route1.html

这是在route1中有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"];
          }
    })

or as per the state view like what you have

或者像你所拥有的国家观点一样

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

The template that has ng-include in it -route1.html Notice myNgIncludeSample.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>

I see that your .state('dashboard') looks different. You may want to fix your as below. Add those curly {} braces. UPDATED: The coffeescript syntax seems fine however my following pure JS code is working without any problem.

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

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

Hope this helps.

希望这可以帮助。

#2

ui-view is a terminal directive and can't have ng-includes placed inside it. You need to define these templates inside your $state declaration by nesting:

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

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

#1