Question

我有这个html页面：

dashboard.html

<div class="wrapper">
        <div class="box">
            <div class="row row-offcanvas row-offcanvas-left">
                <dashboard-sidebar></dashboard-sidebar>
                <div class="column col-sm-10 col-xs-11" id="main">
                    <div class="padding" ui-view="main-view"></div>
                </div>
            </div>
        </div>
    </div>

这样我就可以在“主视图”元素上更改模板：

angular.module("gecoDashboard", ["gecoDashboardGui", "gecoDashboardHome", "gecoDashboardBlog", "ui.router"])
.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('home', {
            url: '/',
            views: {
                'main-view': {
                    templateUrl: 'dashboard-home-view.html',
                }
            },
            title: "Home"
        })
        .state('blog', {
            url: '/blog',
            views: {
                'main-view': {
                    templateUrl:dashboard/views/dashboard-blog-view.html',
                },
            },
            title: "Articoli"
        })
})
.run(['$location', '$rootScope', function ($location, $rootScope) {
    $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
        if (toState.hasOwnProperty('title')) {
            $rootScope.title = toState.title;
        }
    });
}]);

我的问题是：如果我在“主视图”上的模板是这样的：

<h1>Section Title</h1>
<div class="row" ui-view="blog-view"></div>

我如何在“博客视图”上更改模板？

Answer 1

解决！在this link我找到了多视图最简单，最好的解决方案。

app.js

var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){

    // For any unmatched url, send to /route1
    $urlRouterProvider.otherwise("/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"];
          }
      })

    .state('route2', {
        url: "/route2",
        templateUrl: "route2.html"
    })
      .state('route2.list', {
          url: "/list",
          templateUrl: "route2.list.html",
          controller: function($scope){
            $scope.things = ["A", "Set", "Of", "Things"];
          }
      })
})

的index.html

<div class="navbar">
  <div class="navbar-inner">
    <a class="brand" href="#">Quick Start</a>
    <ul class="nav">
      <li><a ui-sref="route1">Route 1</a></li>
      <li><a ui-sref="route2">Route 2</a></li>
    </ul>
  </div>
</div>

<div class="row">
  <div class="span12">
    <div class="well" ui-view></div>        
  </div>
</div>

Here是解决问题的代码示例。

Angular.js：更改模板的内部视图

1 个答案: