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

irlmq6kh 于 2023-05-05 发布在 Angular

关注(0)|答案(2)|浏览(129)

我的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的模板将无法加载。为什么呢？

angularjs

来源：https://stackoverflow.com/questions/25065614/why-wont-my-ng-includes-load-template-when-called-in-a-ui-view

2条答案

按热度按时间

nafvub8i1#

ng-includes在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（'dashboard'）看起来不一样了。您可能需要修复如下。添加大括号。更新：coffeescript语法看起来很好，但是我下面的纯JS代码工作没有任何问题。

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

赞(0）回复(0）举报 2023-05-05

ubof19bj2#

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

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

赞(0）回复(0）举报 2023-05-05

我来回答

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

2条答案

相关问题

热门标签

最新问答