请查看下面或此 jsfiddle 中的演示.angular.module('demoApp', ['ui.router']).config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise('/home');$stateProvider.state('家', {templateUrl: 'views/home.html',摘要:真实}).state('home.main', {网址:'/家'，templateUrl: 'views/charting/chartHome.html',控制器:'左Ctrl'}).state('home.left', {模板:'home.left <a href="#" ui-sref="home.left1">left1 change</a><br/>{{hello}}',控制器:'左Ctrl'}).state('home.left1', {模板:'home.left1 <a href="#" ui-sref="home.left2">left2 change</a>'}).state('home.left2', {模板:'home.left2 <a href="#" ng-click="triggerDirective()">更改指令</a>',控制器:功能($范围){$scope.triggerDirective = function() {console.log('做指令动作');$scope.$emit('rightContent:changeMsg', '新内容');//发射到 rootscope 因为 rightcontent 不是 leftcontent 的孩子};}})}]).directive('rightContent', function() {返回 {限制:'EA'，模板:'来自指令的一些静态内容或其他内容.<strong>{{message}}</strong>',控制器:函数($scope，$rootScope){$scope.message = 'hello from 指令.';$rootScope.$on('rightContent:changeMsg', function(evt, message) {控制台日志(消息)；$scope.message = 消息；});}}}).controller('LeftCtrl', function($scope){$scope.hello = '来自左边的你好';}).controller('appController', function($scope) {});.left {向左飘浮;宽度:50%；高度:200px；背景:浅绿色；}.对 {浮动:对；宽度:50%；高度:200px；背景:浅灰色；}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/><div ng-app="demoApp" ng-controller="appController"><script type="text/ng-template" id="views/home.html"><div><h1>这是家</h1><div class="wrapper"><div ui-view="" class="left"><div class="right"><权限内容></权限内容><a href="#" ui-sref="home.main">home</a><script type="text/ng-template" id="views/charting/chartHome.html">离开{{你好}}<a href="#" ui-sref="home.left">左改</a><script type="text/ng-template" id="views/view1.html">正确的{{你好}}<div ui-view=""></div>I'm trying to implement a site with two main content 'panes' (imagine two columns each half the width of the page). The panes should be able to change independent of each other and have their own controllers and be able to pass data between each other (so the user can navigate through a bunch of pages on the left pane while the right pane stays the same without reloading and vice versa, and a change in the left pane can update data showing up in the right pane).I've looked through a bunch of examples/tutorials on UI Router but can't seem to find a good example of how to implement what I'm trying to do. All of them seem to show either just examples for single nested views (so a single view within a larger view) or show multiple views but not how to change the views independent of each other.I'd like to do this with a single <div ui-view></div> in the index.html file (as opposed to multiple ui-views) so that I can have everything happening within the single parent ui-view and not in the index.html file.Right now I have something like the following js file:config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/home'); $stateProvider .state('home', { url: '/home', views: { '': { templateUrl: 'views/home.html' }, 'left@home': { templateUrl: 'views/charting/chartHome.html', }, 'right@home': { templateUrl: 'views/view1.html', controller: 'View1Ctrl' } } }); }]);and the following HTML for home.html:<div> <h1>This is home</h1></div><div ui-view='left'></div><div ui-view='right'></div>Can anyone help with this? Or is this the wrong way to be thinking about the site? If so what should I be doing?Thanks! 解决方案 This is pretty complicated to solve with ui-router.I've created this fiddle to give ui-router nested states a try.It works but it is gettting ugly quickly.It works like this: home.main.left route changes only the left view and uses the right view from home.main. It would be better to have both view states independent from each other but I'm not sure how to do that with ui-router.I think it would be better to use ui-router to do the navigation of the left part and use a custom directive for the right part (or the other way round). To communicate to the directive you can use $emit/$broadcast.Changing the route of the left part is also possible from the directive with links ui-sref or with $state.go(...) method.Please have a look at the demo below or in this jsfiddle.angular.module('demoApp', ['ui.router']).config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/home'); $stateProvider .state('home', { templateUrl: 'views/home.html', abstract: true }) .state('home.main', { url: '/home', templateUrl: 'views/charting/chartHome.html', controller: 'LeftCtrl' }) .state('home.left', { template: 'home.left <a href="#" ui-sref="home.left1">left1 change</a><br/>{{hello}}', controller: 'LeftCtrl' }) .state('home.left1', { template: 'home.left1 <a href="#" ui-sref="home.left2">left2 change</a>' }) .state('home.left2', { template: 'home.left2 <a href="#" ng-click="triggerDirective()">change directive</a>', controller: function($scope) { $scope.triggerDirective = function() { console.log('do directive action'); $scope.$emit('rightContent:changeMsg', 'new content'); // emit to rootscope because rightcontent is not a child of leftcontent }; } }) }]).directive('rightContent', function() {return { restrict: 'EA', template: 'Some static content or other stuff from directive. <strong>{{message}}</strong>', controller: function($scope, $rootScope) { $scope.message = 'hello from directive.'; $rootScope.$on('rightContent:changeMsg', function(evt, message) { console.log(message); $scope.message = message; }); } }}).controller('LeftCtrl', function($scope){ $scope.hello = 'hello from left';}).controller('appController', function($scope) {});.left { float: left; width: 50%; height: 200px; background: lightgreen;}.right { float: right; width: 50%; height: 200px; background: lightgray;}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/><div ng-app="demoApp" ng-controller="appController"> <script type="text/ng-template" id="views/home.html"> <div> <h1>This is home</h1> </div> <div class="wrapper"> <div ui-view="" class="left"> </div> <div class="right"> <right-content></right-content> </div> <a href="#" ui-sref="home.main">home</a> </div> </script> <script type="text/ng-template" id="views/charting/chartHome.html"> left {{hello}} <a href="#" ui-sref="home.left">left change</a> </script> <script type="text/ng-template" id="views/view1.html"> right {{hello}} </script> <div ui-view=""></div></div> 这篇关于如何在 Angular 中使用 UI Router 正确实现多个视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
