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"?
解决!在这个链接上,我找到了最简单和最好的解决方案。
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>
下面是解决这个问题的代码示例
相关文章:
- 保持外部视图不变,而只是在angular ui中重新加载内部视图
- 在网格视图的自动刷新过程中,设置内部网格视图文本框的可见性
- 从 AngularJS 中的 ngview 内部的视图更新主页
- 控制器内部的scope函数不根据视图中的ng模型更新值
- 主干选项卡内部使用的同一视图的多个实例
- AngularJS - 在服务内部对数组进行排序,在控制器/视图中保留绑定
- HTML5视图内部Java桌面GUI,JavaScript通信
- 角度 ng 重复内部指令视图
- angularjs 部分视图中的内部 javascript 不起作用
- BackboneJS - 使用关键字此内部视图
- 调用 Backbone 内部的外部函数.js的视图初始化方法
- 从局部视图内部修改主视图
- 从谷歌浏览器控制台内部调用主干视图方法
- 模型(和视图)未通过指令中的内部函数进行更新
- 在phonegap JQM中动态创建的列表视图中添加li内部的按钮
- 当路由器使用和内部视图时,尤其是在主干网/需要应用程序中
- 直接访问内部视图,打破每个标签多个视图的行为
- Angular.js:改变模板的内部视图
- 多个事件被添加到内部视图主干
- 骨干数据逻辑内部视图