angularjs - stateprovider 在切换页面时不起作用

Question

在我的程序中，我想在登录页面中按下登录按钮后加载 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 中用于加载程序设置页面的行，我的程序设置配置功能是：

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

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

Answer 1

只需在根 .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.');
         })

Answer 2

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

$state.go("programsetup");

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