HTML

Question

我是ui.router的新手，今天早上我刚拿起来！但我有一种情况，我需要加载第一个视图，然后可以点击其中的内容，可以加载到第二个视图没有替换第一个中的内容...我是很难搞清楚如何做这种行为，但......看起来应该很简单。

这种行为可能吗？

HTML

<div class="col-lg-12">
    <div class="col-lg-3"><!-- menu --></div>
    <div class="col-lg-9">
        <div ui-view="main"></div>
        <div ui-view="lookup"></div>
    </div>
</div>

路由

$stateProvider
    .state('pages', {
        url: '/pages/{page:.*}',
        views: {
            'main': {
                templateUrl: function(stateParams) {
                    return String.format('home/{0}/{1}.html', './pages', stateParams.page);
                }   
            }
        }

    })
    .state('lookup', {
        url: '/lookup/{page:.*}',
        views: {
            'lookup': {
                templateUrl: function (stateParams) {
                    return String.format('home/lookup/{0}.html', stateParams.page);
                }
            }
        }
    })

Answer 1

我认为您应该使用directive作为第二种观点。它允许您在同一视图中有两个模板。 params_you_want_to_pass允许您在第二个模板中获取一些信息。

我希望这很清楚。

HTML

<div class="col-lg-12">
    <div class="col-lg-3"><!-- menu --></div>
    <div class="col-lg-9">
        <div ui-view="main"></div>
        <lookup-directive info="params_you_want_to_pass"></lookup-directive>
    </div>
</div>

ROUTING

$stateProvider
    .state('pages', {
        url: '/pages/{page:.*}',
        views: {
            'main': {
                templateUrl: function(stateParams) {
                    return String.format('home/{0}/{1}.html', './pages', stateParams.page);
                }   
            }
        }

    })

指令

angular.module('yourModule').directive('lookupDirective', lookupDirective);
lookupDirective.$inject = [];

function lookupDirective() { 
  return { 
    restrict: 'E', 
    scope: { 
      info: '=' 
    }, 
    templateUrl: 'yourtemplate.html' 
  }; 
});

Answer 2

您应该使用嵌套状态：

$stateProvider
    .state('pages', {
        url: '/pages/{page:.*}',
        views: {
            'main': {
                // Showing off how you could return a promise from templateProvider
                templateUrl: function(stateParams) {
                    return String.format('home/{0}/{1}.html', './pages', stateParams.page);
                }
            }
        }
    })
    .state('pages.lookup', {
        url: 'lookup',
        views: {
            'lookup': {
                // Showing off how you could return a promise from templateProvider
                templateUrl: function (stateParams) {
                    return String.format('home/lookup/{0}.html', stateParams.page);
                }
            }
        }
    })

查询的网址现在是pages/{page}/lookup

您的ui-view=lookup 应可能位于main内加载的视图内。
它也适用于您当前的html设置。

Answer 3

是的，您可以在同一模板上实现多个视图。

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

ui.router / angular - 单击加载辅助视图而不替换主视图

HTML

路由

3 个答案:

HTML

ROUTING

指令