更新された値を$ scope変数にアクセスして別のページのコントローラにアクセスする方法

Question

HomeControllerのスコープ変数の更新値をUserLoginControllerに取得しようとしています。ここで私は、フォームを持っていると私は次のページに、ユーザー名にアクセスしたい

//controllers 
 

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

 
app.config(function($routeProvider){ 
 
\t 
 
\t $routeProvider 
 
\t .when('/', { 
 
\t \t templateUrl : 'pages/home.html', 
 
\t \t controller : 'HomeController' 
 
\t }) 
 
\t .when('/userlogin', { 
 
\t \t templateUrl : 'pages/userlogin.html', 
 
\t \t controller : 'UserLoginController' 
 
\t }) 
 
\t .when('/verifyuser', { 
 
\t \t templateUrl : 'pages/verifyUser.html', 
 
\t \t controller : 'VerifyUserController' 
 
\t }) 
 
\t .otherwise({redirectTo: '/'}); 
 
}); 
 

 
app.controller('VerifyUserController', function($scope, $rootScope){ 
 
\t $scope.message = "Hello from VerifyUserController"; \t \t 
 

 
}); 
 

 

 
app.controller('UserLoginController', ['$scope', 'User', function($scope, User){ 
 
\t $scope.message = "Hello from HiController"; 
 
\t $scope.name = User.get(); 
 
\t console.log("Hello " + $scope.name); 
 
\t 
 
}]); 
 

 
app.controller('HomeController', ['$scope', 'User', function($scope, User){ 
 
\t $scope.message = "Hello from HomeController"; 
 
\t $scope.uname = User.get(); 
 
\t $scope.$watch('uname', function(v){ 
 
\t  $scope.uname = v; 
 
\t  User.set(v); 
 
\t }); 
 
\t $scope.m = function(){ alert(User.get())}; 
 
\t 
 
\t 
 
}]); 
 

 
app.factory('User', function ($rootScope) { 
 
    var savedData = { 
 
    \t \t user: 'abhishek' 
 
    }; 
 
    function set(data){  \t 
 
    \t savedData.user = data;  \t 
 
    } 
 
    function get(){ 
 
    \t return savedData.user; 
 
    } 
 
    return { 
 
    \t set: set, 
 
    \t get: get 
 
    } 
 
}); 
 

 

 
<!--home.html--> 
 

 
<form name="myForm" action="http://127.0.0.1:8081/varifyUser" method="post"> 
 
\t \t <input type="text" id="uname" name="uname" ng-model="uname" placeholder="Username" required><span style="color:red" ng-show="myForm.uname.$dirty && myForm.uname.$invalid"> 
 
<span ng-show="myForm.uname.$error.required">Username is required.</span></span> \t \t \t \t \t 
 
     <input type="password" id="psw" name="psw" ng-model="psw" placeholder="Password" required><span style="color:red" ng-show="myForm.psw.$dirty && myForm.psw.$invalid"> 
 
<span ng-show="myForm.psw.$error.required">Name is required.</span></span> 
 
\t \t <input type="submit" ng-click="m()" ng-disabled="myForm.uname.$dirty && myForm.uname.$invalid || myForm.psw.$dirty && myForm.psw.$invalid" id="login" name="login" class="login loginmodal-submit" value="Login"> 
 
</form>

私は「アビシェーク」古い値を取得していますが、ユーザ名フィールドを編集した後に更新された値が反映されませんUserLoginControllerに戻る。しかし私はHomeControllerの値を更新しています。 私の質問は、どのようにUserLoginControllerへのフォーム入力の更新/変更値を取得するのですか？

私はサービスにアクセスしましたが、アクセスするためにブロードキャストしましたが、いずれも機能しませんでした。

Answer 1

正常に動作しているようです。ここにはサンプルdemoがあります。

送信後、ログインコントローラーに転送され、値が更新されます。角度とルーターのバージョンが互換性があることを確認してください。

<script data-require="angular.js@1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
<script data-require="angular-route@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular-route.js"></script> 

もう1つのことです。ウォッチを使用する代わりに、値をサブミット関数内で処理するように割り当てます。そうでなければ、サービスに行く必要のないコールが存在する可能性があります。