在 ui-router 中使用 $state

Question

这个有点莫名其妙；我试图在我的应用程序中使用简单的$state.go() 函数，它使用ui-router，但我明白了：

Uncaught Error: [$injector:modulerr] Failed to instantiate module MainApp due to:
Error: [$injector:modulerr] Failed to instantiate module GroupApp due to:
Error: [$injector:unpr] Unknown provider: $state
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24state
    at REGEX_STRING_REGEXP 

这是我正在使用的代码：

var app = angular.module('GroupApp', ['ui.router']);

groupjs_config.$inject = ['$stateProvider', '$state', '$urlRouterProvider'];
app.config(groupjs_config);

groupjs_controller.$inject = ['$scope'];
app.controller('groupjs.ctrl', groupjs_controller);

//----------------------------------------------------
//  FUNCTIONS
//----------------------------------------------------

function groupjs_config($stateProvider, $state, $urlRouterProvider){
    // For any unmatched url, redirect to /state1

    $stateProvider
    .state('group', {
      abstract: true,
      url: "/group/:groupid",
      onEnter: function(){
        if (true){ //logged in
          $state.go('group.home');
        }
        else {
          $state.go('group.noaccess');
        }
      }
    })
    .state('group.home', {
      url: "/group/:groupid",
      templateUrl: "groups/group/group.html"
    })
    .state('group.noaccess', {
      url: "/group/:groupid",
      templateUrl: "groups/group/group_noaccess.html"
    });
}

function groupjs_controller($scope){
    $scope.hi = "hi";
    $.material.checkbox('mycheckbox');

    $scope.groups = [
    ];
}

Answer 1

尝试将 $state 注入 onEnter 方法：

  onEnter: ['$state',function($state){
    if (true){ //logged in
      $state.go('group.home');
    }
    else {
      $state.go('group.noaccess');
    }
  }]

并从配置中取出：

groupjs_config.$inject = ['$stateProvider', '$urlRouterProvider'];

...

function groupjs_config($stateProvider, $urlRouterProvider){

Answer 2

只有提供者和常量可以注入配置块见https://docs.angularjs.org/guide/providers底部的表格

$state 可以注入到控制器或任何过滤器、工厂、服务、运行块等中，但不能在配置中。为了创建除提供者之外的任何东西，必须首先对其进行配置（这就是配置块的用途，配置服务/工厂/值的提供者）。

Answer 3

首先改变这一行：

groupjs_config.$inject = ['$stateProvider', '$state', '$urlRouterProvider'];

到：

groupjs_config.$inject = ['$stateProvider', '$urlRouterProvider'];

像这样改变你的路由功能：

function groupjs_config($stateProvider, $urlRouterProvider){
    // For any unmatched url, redirect to /state1

    $stateProvider
    .state('group', {
      abstract: true,
      url: "/group/:groupid",
      onEnter: ['$state',function($state){
        if (true){ //logged in
          $state.go('group.home');
        }
        else {
          $state.go('group.noaccess');
        }
      }]
    })
    .state('group.home', {
      url: "/group/:groupid",
      templateUrl: "groups/group/group.html"
    })
    .state('group.noaccess', {
      url: "/group/:groupid",
      templateUrl: "groups/group/group_noaccess.html"
    });
}

Answer 4

ui路由器

$stateProvider
      .state('admin', {
        abstract: true,
        url: '/admin',
        template: '<div ui-view></div>'
      })
      .state('admin.index', {
        url: '/index',
        template: '<h3>Admin index</h3>'
      })
      .state('admin.users', {
        url: '/users',
        template: '<ul>...</ul>'
      });

onEnter、onExit

当我们进入或离开视图时，我们的应用会调用这些回调。对于这两个选项，我们可以设置一个我们想要调用的函数；这些函数可以访问解析的数据。

这些回调使我们能够在新视图上或在我们前往另一个状态之前触发操作。这是发起“你确定吗？”的好方法。模式视图或请求用户在进入此状态之前登录。