[英]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>
这样,我更改了“主视图”元素上的模板:
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>
我如何更改“博客视图”上的模板?
解决了! 在此链接上,我找到了针对多视图的最简单,最佳解决方案。
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>
这是解决问题的代码示例。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.