Question

我试图实施一个包含两个主要内容的网站＆＃39;窗格＆＃39; （想象两页每页宽度的两列）。窗格应该能够彼此独立地更改并拥有自己的控制器并且能够在彼此之间传递数据（因此用户可以在左窗格中浏览一堆页面，而右窗格保持不变，而无需重新加载和反之亦然，左窗格中的更改可以更新右窗格中显示的数据。

我已经浏览了一些关于UI路由器的示例/教程，但似乎无法找到一个很好的例子来说明如何实现我想要做的事情。所有这些似乎只显示单个嵌套视图的示例（因此在较大视图中的单个视图）或显示多个视图，但不显示如何彼此独立地更改视图。

我想在index.html文件中使用单个<div ui-view></div>执行此操作（而不是多个ui-views），这样我就可以在单个父ui-view中发生所有事情。不在index.html文件中。

现在我有类似以下js文件：

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'
                }
            }

        });
    }]);

以及home.html的以下HTML：

<div>
    <h1>This is home</h1>
</div>
<div ui-view='left'>
</div>
<div ui-view='right'>
</div>

任何人都可以帮忙吗？或者这是考虑网站的错误方式？如果是这样我该怎么办？

谢谢！

Answer 1

使用ui-router解决这个问题非常复杂。

我已经创建了这个fiddle来试试ui-router嵌套状态。它有效但很快就会变得难看。

它的工作方式如下：home.main.left路由仅更改左侧视图，并使用home.main中的右侧视图。最好让两个视图状态彼此独立，但我不知道如何使用ui-router做到这一点。

我认为最好使用ui-router进行左侧部分的导航，并使用自定义指令进行正确的部分（或反过来）。要与指令进行通信，您可以使用$emit/$broadcast。

也可以使用链接ui-sref或$state.go(...)方法更改左侧部分的路线。

请查看下面的演示或此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路由器正确实现多个视图？

1 个答案: