如何在 Angular 中使用 UI Router 正确实现多个视图? [英] How to correctly implement multiple views with UI Router in Angular?

查看：17
本文介绍了如何在 Angular 中使用 UI Router 正确实现多个视图?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试实现一个包含两个主要内容窗格"的站点(想象一下两列，每列是页面宽度的一半).窗格应该能够相互独立地更改并拥有自己的控制器并能够在彼此之间传递数据(因此用户可以浏览左侧窗格上的一堆页面，而右侧窗格保持不变而无需重新加载和反之亦然，左窗格中的更改可以更新右窗格中显示的数据).

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

我想在 index.html 文件中使用单个

(而不是多个 ui-views)来做到这一点，以便我可以在单父 ui-view 中发生所有事情，而不是在 index.html 文件中.

现在我有类似以下 js 文件的内容:

config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {$urlRouterProvider.otherwise('/home');$stateProvider.state('家', {网址:'/家'，意见:{'': { templateUrl: 'views/home.html' },'离开家': {templateUrl: 'views/charting/chartHome.html',},'right@home':{templateUrl: 'views/view1.html',控制器:'View1Ctrl'}}});}]);

以及 home.html 的以下 HTML:

<h1>这是家</h1>
<div ui-view='left'>

<div ui-view='right'>

有人可以帮忙吗?或者这是考虑网站的错误方式?如果是这样，我该怎么办?

谢谢！

解决方案

使用 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('家', {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 正确实现多个视图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆