0

我想獲取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的表單輸入?

我已經嘗試過服務,廣播來訪問,但沒有人工作。

回答

0

它似乎工作正常。這裏是一個樣本demo

提交後它將直接登錄控制器和值得到updated.Check角和路由器版本是兼容的。

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

還有一件事。代替使用watch分配值到提交函數裏面的服務。否則可能會有不必要的電話去服務。

+0

只有當我刪除表單**元素的** action屬性,然後在HomeController中添加'$ location.url('/ userlogin')'。我得到了期望的結果。但是通過這樣做,下一個**頁面顯示爲禁用**,即我無法點擊任何鏈接。 –

+0

我檢查過'/ userlogin'頁面的源代碼,發現'

'。這是自動添加的。結果頁面被禁用。 –

相關問題