我正在使用AngularJs做一个网络应用程序,而且我正在使用$ state进入应用程序。登录后,我想转到主页(状态' app.dashboard.home'绝对状态' app.dashboard)。
在此页面中,有一个按钮可以进入名为费用的另一个视图(状态' app.dashboard.expense'绝对状态' app.dashboard)。但是当我点击按钮时,控制台会显示以下错误:
$ state.go不是函数
为什么?
这是路由:
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>
答案 0 :(得分:9)
问题在于错误的参数数组定义和声明的函数参数。
第四个被声明为 '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)