Question

在我的应用中，我需要将多个url与state相同 - 我如何实现这一目标？

这是我现有的状态：

.state('createCase', {
        url: '/createCase',
        templateUrl: null,
        controller: null,
        data: {
          requireLogin: false
        },

我也想跟这样的另一个url：

.state('createCase', {
        url: '/createCase?sn=12345', //(12345 is dynamic )
        templateUrl: null,
        controller: null,
        data: {
          requireLogin: false
        },

这是我目前的职能：

function routeConfig($stateProvider, $locationProvider, $urlRouterProvider) {

    $stateProvider
      .state('login', {
        url: '/',
        templateUrl: function(){ 
          console.log('from 1oauth'); 
          return 'app/login/login.html';
        },
        controller: 'loginCtrl as ctrl',
        data: {
          requireLogin: false
        }
      })
      .state('oauth', {
        url: '/oauth',
        templateUrl: function(){

          console.log('from 2oauth');
          return 'app/oauth/oauth.template.html';

        },
        controller: 'OAuthController as ctrl',
        data: {
          requireLogin: false
        }
      })
      .state('createCase', {
        url: '/createCase',
        templateUrl: null,
        controller: null,
        data: {
          requireLogin: false
        }

        }
      })


    // if (isWeb()){  
      $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
      });
    // }

    // $urlRouterProvider.otherwise('/');
    $urlRouterProvider.otherwise('/');

  }

Answer 1

您不需要为同一个网址定义两个不同的状态。在控制器中，您可以使用具有查询参数的$state.params对象作为属性。

您的路线

.state('createCase', {
        url: '/createCase',
        templateUrl: null,
        controller: 'MyCtrl',
        data: {
          requireLogin: false
        },
        params: {
          sn: null
        }

您的控制器

function MyCtrl($state) {
    console.log($state.params);
}

Answer 2

在路线中定义：

$stateParams

在控制器中，将$stateParams.sn注入依赖项，并将其与$state.go('createCase', {sn:1234}); // move to state with a param $stateParams.sn // get a value of ==> 1234一起使用。

示例：

    func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
    // you need to implement this method too or you can't swipe to display the actions
}

Answer 3

看起来您想要创建父状态和子状态。如果您只想访问$routeParams，可以将它们传递给控制器，或者在使用相同状态时将其保留。

(function () {
    'use strict';

    angular.module('app', ['ui.router'])
        .config(routeConfig);

    routeConfig.$inject = ['$stateProvider'];

    function routeConfig($stateProvider) {
        $stateProvider
            .state('createCase', {
                url: '/createCase',
                template: '<h3>Create Case</h3><div ui-view="detail"></div>'
            })
            .state('createCase.detail', {
                parent: 'createCase',
                url: '/:sn',
                views: {  'detail@createCase': {
                        template: '{{sn}}',
                        controller: function($scope, $stateParams){
                            $scope.sn = $stateParams.sn;
                        }
                    }
                }
            })
    }
}());

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>AngularJS</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
</head>

<body ng-app="app">
    <ul>
        <li><a ui-sref="createCase">createCase</a></li>
        <li><a ui-sref="createCase.detail({sn:'123456'})">createCaseDetail 123456</a></li>
        <li><a ui-sref="createCase.detail({sn:''})">createCaseDetail None</a></li>
    </ul>
    <div ui-view=""></div>
</body>

</html>

angularjs - ui-route - 如何附加具有相同名称的mutlple URL？

3 个答案: