2016-03-03 66 views
1

这是我的代码如何使用Angular Ui-Router实现两个面板布局?

app.config(['$stateProvider', function($stateProvider){ 
 
     $stateProvider 
 
     .state('student',{ 
 
      url: '/student', 
 
      
 
      views: { 
 
      'list': { 
 
       templateUrl: 'list.html', 
 
       controller: 'StudentsCtrl' 
 
      }, 
 
      'edit':{ 
 
       templateUrl: 'edit.html', 
 
       controller: 'StudentEditCtrl' 
 
      } 
 
      } 
 
     }) 
 

 
    }]);
<html ng-app="app"> 
 
<div ui-view="list"></div> 
 
<div ui-view="edit"></div> 
 
</html>

我有并排两个面板侧布局,我想上面的代码,但在页面加载的时间两个面板的HTML页面同时显示。但我想在左侧显示第一个list.html,然后用户单击list.html中的添加或编辑按钮,该时间将在面板的右侧渲染edit.html。

回答

0

为什么不能将HTML和控制器结合在一起?当单击添加或编辑按钮时,StudentCtrl可以切换显示编辑html。

我想不出一个简单的方法来使它与你现在设计的方式一起工作。你必须在你的主要HTML和/或某种似乎凌乱的共享Angular服务中使用一些协调控制器。