web-dev-qa-db-ja.com

$ window.location.hrefがAngularJSで機能しない

基本的なAngularJSログインページを作成していますが、$ window.location.hrefは、WAMPがホストするシステムの新しいhtmlにページをリダイレクトしませんでした。私もそれをグーグルにリダイレクトしてみました。何も起こりません。ここで利用可能なソリューションをすべて試しましたが、何も機能しないようです。解決策はありますか?

JSの後にHTML

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';


  $scope.submit = function() {
    if ($scope.username && $scope.password) {
      var user = $scope.username;
      var pass = $scope.password;
      if (pass == "admin" && user == "[email protected]") {
        alert("Login Successful");
        $window.location.href = "http://google.com"; //Re-direction to some page
      } else if (user != "[email protected]") {
        alert("Invalid username");
      } else if (pass != "admin" && user == "[email protected]") {
        alert("Invalid password");
      }
    } else {
      alert("Invalid Login");
    }
  }


});
<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="login.js"></script>
  <link rel="stylesheet" href="login.css">
</head>

<body ng-controller="MainCtrl">
  <form>
    <label>Username:</label>
    <input type="email" ng-model="username" class="lab1" />
    </br>
    </br>
    <label></label>Password:</label>
    <input type="password" ng-model="password" class="lab2">
    </br>
    <button type="submit" ng-click="submit()" class="buttonclass">login</button>
  </form>
</body>

</html>
8
Varun Nair

angular jsでは、_$location_を使用できます。コントローラに挿入します。

_app.controller('MainCtrl', function($scope, $location) { ... }
_

そして、あなたがグーグルにリダイレクトしたいなら、そのurl()メソッドを使ってください:

_$location.url('http://google.fr');
_

相対URLにはpath()メソッドを使用することもできます。

_$location.path('home'); // will redirect you to 'yourDomain.xx/home'
_

https://docs.angularjs.org/api/ng/service/ $ location

4
Alexandre

注目に値する 現在のドキュメント for $location。具体的には引用:

$ locationはいつ使用する必要がありますか?

アプリケーションが現在のURLの変更に対応する必要がある場合、またはブラウザーで現在のURLを変更する場合。

それは何をしませんか?

ブラウザのURLが変更されても、ページ全体が再読み込みされることはありません。 URLの変更後にページをリロードするには、下位レベルのAPI、$ window.location.hrefを使用します。

ブラウザを新しいページにリダイレクトする必要がある場合は、$ window.locationをお勧めします。

3
Jim Grimmett
Try this,

var homeApp = angular.module('HomeApp', []);

homeApp.controller('HomeController', function ($scope, $http, $window) {
    $scope.loginname = "Login To Demo App";
    $scope.login = function () {

        var name = $scope.username;
        var pwd = $scope.password;
        var req = {
            method: 'POST',
            url: '../Account/LoginAccount',
            headers: {
                'Content-Type': undefined
            },
            params: { username: name, password: pwd }
        }

        $http(req).then(function (responce) {

            var url = '';
            if (responce.data == "True") {
                url = '../Account/WelcomePage';
                $window.location.href = url;
            }
            else {
                url = '../Account/Login';
                $window.location.href = url;
            }
        }, function (responce) {

        });
    }
});
1
Ramu Vemula

AngularJSでは$window.location.hrefを使用できます

app.controller('MainCtrl', function ($scope,$window) {
    $scope.formData = {};
    $scope.submitForm = function (formData){
    $window.location.href = "jobs";
    };
  })

Angularには$locationという名前の独自の位置ハンドラーがあり、angular app;

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

コントローラに注入し、次のように使用します。

$location.path('http://foo.bar')
0
İsmail Şener

私の2セント-

ページから移動するために$window.location.hrefまたは$location.pathを動作させることができませんでした。 $locationのドキュメントでは(警告の下)に次のように記載されています。

$ locationサービスでは、URLのみを変更できます。ページをリロードすることはできません。 URLを変更してページを再読み込みするか、別のページに移動する必要がある場合は、低レベルのAPI $ window.location.hrefを使用してください。

$ location Caveats

$ windowのドキュメントは...不足しています。とにかく、コントローラーではどちらのサービスも機能しませんでした(ただし、$ location.pathはindex.runファイルで機能します)。

このプロジェクトでは、ui-routerを使用しているので、これはうまくいきました:$state.go('state.name');-ここで、state.nameは、ユーザーが行きたい状態/ページ名の文字列です。つまり、'index.users'

0
Justin Kruse