$state.go 不是函数

Question

我正在用 AngularJs 做一个网络应用程序，我正在使用 $state 进入应用程序。登录后想去家(绝对状态'app.dashboard的状态'app.dashboard.home')。

在此页面中，有一个按钮可以进入另一个名为费用 （绝对状态 'app.dashboard 的状态 'app.dashboard.expense'） 的视图。但是当我点击按钮时，控制台显示这个错误：

$state.go is not a function

为什么？

这是路由：

angular.module('app')
.run(
['$rootScope', '$state', '$stateParams',
  function($rootScope, $state, $stateParams) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
  }
]
)
 .config(
['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider
    .otherwise('/app/authenticating/');

  $stateProvider
    .state('app', {
      abstract: true,
      url: '/app',
      templateUrl: 'common/mainApp.html'
    })

    .state('app.auth', {
      url: '/authenticating/',
      templateUrl: 'common/authenticating/authenticating.html',
      controller: 'authenticatingCtrl',
      resolve: {
        deps: ['$ocLazyLoad',
          function($ocLazyLoad) {
            return $ocLazyLoad.load({
              files: [
                'common/authenticating/controllers/authenticatingCtrl.js'
              ]
            }).then(function success(args) {
              console.log('success');
              return args;
            }, function error(err) {
              console.log(err);
              return err;
            });
          }]
      }
    })

    .state('app.dashboard', {
      abstract: true,
      url: '/dashboard',
      templateUrl: 'dashboard/dashboard.html',
      resolve: {
        deps: ['$ocLazyLoad',
          function($ocLazyLoad) {
            return $ocLazyLoad.load({
              files: [
                'dashboard/dashboardCtrl.js'
              ]
            }).then(function success(args) {
              console.log('success');
              return args;
            }, function error(err) {
              console.log(err);
              return err;
            });
          }]
      }
    })

    .state('app.dashboard.home', {
      url: '/home',
      views: {
        'content': {templateUrl: 'dashboard/home/home.html'}
      },
      resolve: {
        deps: ['$ocLazyLoad',
          function($ocLazyLoad) {
            return $ocLazyLoad.load({
              files: [
                'dashboard/home/homeCtrl.js'
              ]
            }).then(function success(args) {
              console.log('success');
              return args;
            }, function error(err) {
              console.log(err);
              return err;
            });
          }]
      }
    })

      .state('app.dashboard.expense', {
        url: '/newExpenseList',
        views: {
          'content': {templateUrl: 'dashboard/expense/new/new.html'}
        },
        resolve: {
          deps: ['$ocLazyLoad',
            function($ocLazyLoad) {
              return $ocLazyLoad.load({
                files: [
                  'dashboard/expense/new/newCtrl.js'
                ]
              }).then(function success(args) {
                console.log('success');
                return args;
              }, function error(err) {
                console.log(err);
                return err;
              });
            }]
        }
      })

}])

这是dashboard.html:

<div class="content-wrap" nav-collapse-toggler type="swipe">
     <main role="main" >
         <div class="section-info">
             <div class="section-subtitle">{{app.name}}</div>
         </div>
          <div id="content" class="content view-animate fade-up" ui-view="content"></div>
     </main>
</div>

这是homeCtrl:

'use strict';

angular.module('app').controller('HomeCtrl', ['$http', '$scope', '$rootScope', 'toaster', 'GlobalApplicationData', '$log', '$state', '$stateParams',
    function($http, $scope, $rootScope, GlobalApplicationData, $log, $state, $stateParams) {
        $scope.goToNewExpenseList = function() {
        $state.go('app.dashboard.expense');
        };
    }]);

这是home.html:

<div class="container" ng-controller="HomeCtrl">
    <div class="form">
            <button class="lol" ng-click="goToNewExpenseList()">Go to expense list</button>
    </div>
</div>

Answer 1

问题出在错误的参数数组定义和声明的函数参数中。

第四个被声明为 'toaster'，但是在函数参数中缺少它...所以所有其他的都被移动并包含不同的东西

['$http', '$scope', '$rootScope', 'toaster', 'GlobalApplicationData', '$log', '$state', '$stateParams',
// original is missing 4th param
//function($http, $scope, $rootScope, GlobalApplicationData, $log, $state, $stateParams) 
// here we get $state as $state, because the 4th param will be toaster
function($http, $scope, $rootScope, toaster, GlobalApplicationData, $log, $state,  $stateParams)

$state.go 不是函数

$state.go is not a function

angularjs

angular-ui-router

state

angularjs-ng-click