Angular UI-路由器帮助 - 根据状态显示元素

Question

首先，我是 angular 的新手，我继承了这个项目。这似乎很容易说出状态是否如此显示，但我一直失败:]

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 嵌套共享相同的 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-路由器帮助 - 根据状态显示元素

Angular UI-Router Help - Show Elements Based On State

angularjs

angular-ui-router

ng-show