[英]AngularJS moving ui-view breaks rendering
I am developing an angularJS site using the jhipster framework. 我正在使用jhipster框架开发angularJS网站。 The framework provides a AngularJS + Bootstrap + Spring Boot combination. 该框架提供了AngularJS + Bootstrap + Spring Boot组合。 I have been trying to replace bootstrap by angular material but I am having trouble doing so. 我一直在尝试用棱角分明的材料替换引导程序,但是这样做很麻烦。
Original index.html setup: 原始index.html设置:
<div ui-view="navbar" ng-cloak=""></div>
<div class="container">
<div class="well" ui-view="content"></div>
</div>
Both the navbar and content ui-view map to a view: 导航栏和内容ui视图都映射到视图:
$urlRouterProvider.otherwise('/');
$stateProvider.state('site', {
'abstract': true,
views: {
'navbar@': {
templateUrl: 'scripts/components/navbar/navbar.html',
controller: 'NavbarController'
}
},
resolve: {
authorize: ['Auth',
function (Auth) {
return Auth.authorize();
}
],
translatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate, $translatePartialLoader) {
$translatePartialLoader.addPart('global');
}]
}
});
$stateProvider
.state('home', {
parent: 'site',
url: '/',
data: {
authorities: []
},
views: {
'content@': {
templateUrl: 'scripts/app/main/main.html',
controller: 'MainController'
}
},
resolve: {
mainTranslatePartialLoader: ['$translate', '$translatePartialLoader', function ($translate,$translatePartialLoader) {
$translatePartialLoader.addPart('main');
return $translate.refresh();
}]
}
});
I would like to render my content within my navbar view because that is how the angular material side navigation component works: http://codepen.io/marcysutton/pen/OPbpKm , this is where my trouble starts. 我想在导航栏视图中呈现我的内容,因为这是角形材质侧面导航组件的工作方式: http : //codepen.io/marcysutton/pen/OPbpKm ,这是我的麻烦所在。
If I move the content ui-view into to correct part of the navbar nothing gets renderder 如果我将内容ui-view移至导航栏的正确部分,则渲染器将无法渲染
new navbar.html: 新的navbar.html:
...
</md-sidenav>
<div layout="column" flex id="content">
<md-content layout="column" flex class="md-padding">
<div class="well" ui-view="content"></div>
</md-content>
</div>
...
Do I need to change something in my angular code to support this behavior? 我是否需要更改角度代码中的某些内容以支持此行为? Thanks in advance! 提前致谢! NOTE: the original index.html works, fails after moving it. 注意:原始index.html可以工作,移动后将失败。
I fixed it by doing the following: 我通过执行以下操作修复了该问题:
views: {
'content@site': {
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.