2 
var app = angular.module('myApp', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {       
  $routeProvider.
  when('/success', {
    templateUrl: 'success.html',
    controller: 'sucCtrl'


  }).
  otherwise({
    redirectTo: '/index'
  })
}])


app.controller('validateCtrl', function($scope, $http, $location) {

  $scope.submit = function(user,password) {
    //for local storage validation

    $http.get('credentials.json').then(function(response) {
      $scope.credentials = response.data;

      if((user === $scope.credentials.username) && (password === $scope.credentials.password)){
        alert("ok");
         $location.path('/success');
      }

      else{
        alert("nit "); }



    });    


  };

})

app.controller('sucCtrl',['$scope', function($scope) {
  alert("succs");

}]);

これは初心者の質問かもしれません。ログインフォームを検証し、成功時に success.html にリダイレクトしようとしています。しかし、次のページに移動できません。$location.path('/success') を使ってみました。ここにplunkerの作業サンプルがあります.. http://plnkr.co/edit/0v7njznHdtwgpaG2NfwA?p=preview

4

1 に答える 1

2

ng-viewビューに表示されるルートの変更を取得するためのディレクティブを書き損ねました。また、ページの html の構造化が台無しになっています。以下のコメントを参照してください。これを機能させて改善するのに役立ちます。

ルートの変更に基づいてすべてのビューがロードされるように、その ng-view ディレクティブを本体に配置する必要があります。

また、ルートからのみフォーム html をロードする必要があります。 (ログイン フォーム)configを/login表示するルートをもう 1 つ追加することをお勧めします。form.html

設定

app.config(['$routeProvider', function($routeProvider) {       
  $routeProvider.
  when('/success', {
    templateUrl: 'success.html',
    controller: 'sucCtrl'
  })
  .when('/login', {
    templateUrl: 'form.html',
    controller: 'validateCtrl'
  }).
  otherwise({
    redirectTo: '/login'
  })
}])

マークアップ

<body>
  <div ng-view></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
  <script src="login.controller.js"></script>
</body>

あなたの success.html は部分的である必要があります。インデックスページからのみロードされたスクリプトへの参照を再度持つべきではありません

success.html

<div>
  Success Message
</div>

ワーキングデモ

于 2015-09-06T08:03:02.737 に答える