我正在学习角度js,我从简单的待办事项开始。但我对ui观点,状态和指令感到困惑。 我还需要所有三个州都有的数据。这就是我现在被困住的地方,我需要把它放在$ rootScope中,这不是一个好习惯。我还想为所有三个面板分配不同的控制器
以下是完整代码https://github.com/udayghulaxe/ticitic_todo
我想要的是这个 This is my app strucutre
我想要第一个面板中的项目列表,然后是第二个面板中的任务列表,然后是第三个面板中的任务详细信息 到目前为止我所做的就是这个。
$stateProvider
.state('dashboard', {
url: '/dashboard',
abstract: true,
views: {
'': { templateUrl: './partials/main.html'},
'header_toolbar@dashboard': { templateUrl: './views/header_toolbar.html' },
'sidenavleft@dashboard': { templateUrl: './views/sidenav.html' },
'widgets@dashboard': { templateUrl: './views/widgets.html'},
'todo_detail@dashboard': { templateUrl: './views/todo_detail.html' }
}
})
.state('dashboard.listdetail', {
url: '/lists/:list_id/',
templateUrl: './partials/list.detail.html',
controller:'ListController',
resolve: {
list_id: function($stateParams){
return $stateParams.list_id;
}
},
data: {
authorizedRoles: [USER_ROLES.user],
pageTitle: 'Lists'
}
})
.state('dashboard.tododetail', {
url: '/lists/:list_id/:todo_id',
templateUrl: './partials/list.detail.html',
controller:'ListController',
resolve: {
list_id: function($stateParams){
console.log($stateParams);
return $stateParams.list_id;
}
,
todo_id: function($stateParams){
console.log($stateParams);
return $stateParams.todo_id;
}
}
});
<div id="appContainer" md-theme="{{ dynamicTheme }}" ng-init="load()" md-theme-watch>
<!-- Header Toolbar -->
<div ui-view="header_toolbar"></div>
<div layout="row" layout-xs="column" layout-sm="column">
<!-- Sidenav right view -->
<div ui-view="sidenavleft" id="nav_container"></div>
<!-- Main middle container -->
<div flex="100" flex-gt-sm="55" layout="column" id="list_content">
<md-content layout="column" flex class="md-padding">
<div ui-view></div>
</md-content>
</div>
<!-- Todo Detail View -->
<div ui-view="todo_detail" id="todo_detail_view"></div>
</div>
</div>
有人可以帮助我为我的应用程序编写正确的结构(ui状态)。