Angular.js: 更改模板的内部视图
Angular.js: change internal view of a template
我有这个 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>
有了这个,我更改了 "main-view" 元素上的模板:
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;
}
});
}]);
我的问题是:如果我在 "main-view" 上的模板是这样的:
<h1>Section Title</h1>
<div class="row" ui-view="blog-view"></div>
如何更改 "blog-view" 上的模板?
已解决!
在 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是解决问题的代码示例。
我有这个 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>
有了这个,我更改了 "main-view" 元素上的模板:
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;
}
});
}]);
我的问题是:如果我在 "main-view" 上的模板是这样的:
<h1>Section Title</h1>
<div class="row" ui-view="blog-view"></div>
如何更改 "blog-view" 上的模板?
已解决! 在 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是解决问题的代码示例。