stateprovider无法切换页面

时间:2016-02-23 06:16:26

标签: angularjs angular-config

在我的程序中,我想在登录页面中按下登录按钮后加载programsetup html页面。

登录页面的myconfig功能如下

 .config(function config($stateProvider) {
$stateProvider.state('login', {
    url: '/login',
    views: {
        "main": {
            controller: 'LoginCtrl',
            templateUrl: 'login/login.tpl.html'
        }
    },
    data: {
        pageTitle: 'Login'
    }
    });
 })

登录页面加载成功!但点击登录按钮后,程序设置页面未加载

$location.href = "#/programsetup";

这是我在登录.js用于加载程序设置页面的行我的programsetup配置功能是:

  .config(function config($stateProvider) {
    $stateProvider.state('programsetup', {
    url: '/programsetup',
    views: {
        "main": {
            controller: 'ProgramSetupCtrl',
            templateUrl: 'programsetup/programsetup.tpl.html'
        }
    },
    data: {
        pageTitle: 'Program Setup'
    }
   });
 })

我在做什么错?请帮帮我。

2 个答案:

答案 0 :(得分:0)

在您的login.js文件(登录控制器内)中,您需要编写ng-click方法并添加以下代码

$state.go("programsetup");

$ state需要在控制器中添加依赖注入

答案 1 :(得分:0)

只需在root .config中配置programsetup的状态即可。然后按钮登录。用户$state.go('programsetup')转到该页面。

粗糙的Html:

<button class="button button-positive" ng-click="login()">Go Programsetup</button>

然后在配置和控制器中。

.config(function config($stateProvider) {
         $stateProvider.state('login', {
             url: '/login',
             views: {
                 "main": {
                     controller: 'LoginCtrl',
                     templateUrl: 'login/login.tpl.html'
                 }
             },
             data: {
                 pageTitle: 'Login'
             }
         });

         $stateProvider.state('programsetup', {
             url: '/programsetup',
             views: {
                 "main": {
                     controller: 'ProgramSetupCtrl',
                     templateUrl: 'programsetup/programsetup.tpl.html'
                 }
             },
             data: {
                 pageTitle: 'Program Setup'
             }
         });
     })


     .controller('LoginCtrl', function($scope, $state) {
             $scope.login = function() {
                 $state.go('programsetup');
             }

         })
         .controller('ProgramSetupCtrl', function($scope) {
             alert('i am at Program setup page.');
         })