在ui-router中使用$ state给出

时间:2015-08-07 07:21:21

标签: angularjs angular-ui-router

这个令人费解;我尝试在我的应用中使用简单的$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 = [
    ];
}

4 个答案:

答案 0 :(得分:1)

只有提供者和常量才能注入配置块,请参阅https://docs.angularjs.org/guide/providers底部的表格

可以将$ state注入控制器,或者任何过滤器,工厂,服务,运行块等,但不是在配置中。除了创建提供者之外,必须先配置它(这是配置块的用途,配置服务/工厂/值的提供者)。

答案 1 :(得分: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){

答案 2 :(得分:1)

首先改变这一行:

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"
    });
}

答案 3 :(得分:0)

<强> 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

当我们转换到视图或从视图中移出时,我们的应用程序会调用这些回调。对于这两个选项,我们可以设置一个我们想要调用的函数;这些函数可以访问已解析的数据。

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