Question

首先，我是角色新手，我继承了这个项目。这似乎应该是非常容易说，如果国家是这个节目，但我一直在失败：]

angular.module('myApp')
    .config(function ($stateProvider) {
        $stateProvider
            .state('page1', {
                url: '/page1',
                data: etc..................
                },


.state('page1.nest', {
                    url: '/page1/nest',
                    data: etc..................
                    },
.state('page2', {
                        url: '/page2',
                        data: etc..................
                        },

每个页面都有自己的控制器。 page1和page1 nest共享相同的templateUrl：'scripts / app / page.html'。下面的div存在于page.html上。

我如何简单说...

<div>
  <span ng-show="if state == page1">Page 1</span>
  <span ng-show="if state == page1/nest">Page 1 Nest</span>
</div>
<div>
 Same Content on both here
</div>

我认为它与$ stateParams有关，需要暴露在控制器的范围内？

Answer 1

您希望使用UI-Router提供的$ state服务

Check the documentation out here.

你会做类似

的事情

在你的控制器中。注入$ state然后将其设置为范围变量

$scope.state = $state

然后你可以做这样的事情。

<span ng-show="state.is('page1')">Page 1</span>

或者显然你可以在你的控制器中使用一个功能。

<span ng-if="inState('page1')">Page 1</span>

在控制器中

$scope.inState = function(state){
    return $state.is(state);
}

Answer 2

首先让我们先将代码格式化得更好，然后关闭应该关闭的代码。

angular.module('myApp')
    .config(function($stateProvider) {
            $stateProvider
                .state('page1', {
                    url: '/page1',
                    template: 'templates/page1.html',
                    data: etc..................
                }),
                .state('page1.nest', {
                    url: '/page1/nest',
                    template: 'templates/page1.nest.html',
                    data: etc..................
                }),
                .state('page2', {
                    url: '/page2',
                    template: 'templates/page2.html',
                    data: etc..................
                });

通常，您可以在项目结构中的某个位置使用这些不同的模板，例如

/app
    /templates

然后你有索引页......

<html ng-app>
<body>
    <div ng-controller="myController">
        <div ui-view></div> <!-- this is where the page1 or page2 state gets loaded -->
    </div>
</body>
</html>

然后在你的page1或page2 html文件中

<div>
 ... content goes here ...
    <div ui-view></div> <!-- nested content will go in here -->
</div>

然后在你的page1.nest.html

中

<div>
... all your nested content goes here
</div>

Angular UI-Router帮助 - 基于状态显示元素

2 个答案: