javascript - 如何在angular js中更改 Controller 的 View ?

标签 javascript angularjs ngroute ng-view angularjs-ng-route

我是 Angular js 的新手,正在尝试使用 ng-viewngRoute 指令。

我有一个 loginPage.html,其中的登录按钮代码如下所示

<button class="button button-block" ng-click="login()">Log In</button> 

单击按钮时,将执行 loginController 中的登录功能,我的 Controller 如下所示:

var App = angular.module('App', ['ngRoute']);

App.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'loginPage.html',
        controller: 'loginController'
      }).
      when('/home', {
        templateUrl: 'homePage.html',
        controller: 'homeController'
      });
  }]);

App.controller('loginController', ['$scope', '$http', '$location', function($scope, $http) {
    console.log("Hello from login controller");


    $scope.login = function() {
        //console.log($scope.user);
        $http.post('/login', $scope.user).success(function(response) {
            if(response.status == "true")
                //if the response is true i want to go to homepage.html.

            else
                $scope.error="Invalid login! Please try again";
                $scope.user.email="";
                $scope.user.password="";
      });
    };

}]);

如果 response.status==true 那么我想将 View 更改为 /home。有人可以告诉我该怎么做吗?

谢谢。

最佳答案

if(response.status == "true")
    $location.path("/home");

不要忘记将 $location 添加到您的 Controller 参数中,如下所示:

['$scope', '$http', '$location', function($scope, $http, $location)...

此外,将您的 else 语句括在方括号中,否则只有第一行在语句中:

else {
    $scope.error="Invalid login! Please try again";
    $scope.user.email="";
    $scope.user.password="";
}

关于javascript - 如何在angular js中更改 Controller 的 View ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36280414/

相关文章:

php - 想要 window.onload = init; 上的 javascript锚定 "#top"

javascript - Angular -sweetalert + browserify : how to install/require/inject?

javascript - 如何将 Controller http 调用转换为接受参数的服务/工厂模式

javascript - AngularJS ng-route如何在解析时发出http请求

javascript - 倒计时和重定向的正确方法

javascript - 如何设置 JetBrains 始终使用 ECMAScript 6?

javascript - Highcharts:使 X 轴和 Y 轴相交于 0

javascript - 当数据通过 Angularjs 解析到达时如何触发渲染模板

javascript - 想要使用 Angular JS 在不同页面中显示特定行数据

javascript - 更改 JavaScript 中的 JSON 格式