無法訪問Angular JS中的控制器

我是Angular JS的新手，想要以登錄表單開始。我閱讀了一些在線資料，並決定放棄它。無法訪問Angular JS中的控制器

下面是我的代碼，當我點擊「登錄」時，沒有任何反應，我不確定我的html腳本是否與控制器通信，或者我在控制器中編寫了錯誤代碼。

<!DOCTYPE html> 
 
<html data-ng-app="loginAuth"> 
 
\t <head> 
 
\t \t <title> 
 
\t \t </title> 
 
\t </head> 
 
\t <body> 
 
\t 
 
\t <h2>Angular Authentication</h2> 
 

 
\t <div data-ng-controller="loginController"> 
 
\t \t <label>Username</label> 
 
\t \t <input type="text" name="username" data-ng-model="login.username"/> 
 
\t \t <br/> 
 
\t \t 
 
\t \t <label>Password</label> 
 
\t \t <input type="password" name="password" data-ng-model="login.password"/> \t 
 
\t \t <br/> 
 
\t \t 
 
\t \t <input type="button" ng-submit="login.submit(login.username, login.password)" value="Login"/> 
 
\t \t <br/><br/> 
 
\t \t {{login.message}} 
 
\t </div> 
 
\t 
 
\t <script src="angular.min.js"></script> 
 
\t 
 
\t <script> 
 
\t 
 
\t 'use strict'; 
 
\t 
 
\t angular.module('loginAuth') 
 
\t .controller('loginController', function ($scope) 
 
\t { 
 
\t 
 
\t function login.submit(username, password) 
 
\t { 
 
\t \t if (username === 'admin' && password === 'test99') 
 
\t \t { 
 
\t \t .then(onSuccess); 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t .catch(onError); 
 
\t \t } 
 
\t } 
 
\t 
 
\t function onSuccess() 
 
\t { 
 
\t \t login.message = 'Login Successful!'; 
 
\t } 
 
\t function onError(reason) 
 
\t { 
 
\t \t login.message = reason.message; 
 
\t } 
 

 
\t }); 
 
\t 
 
\t </script> 
 
\t </body> 
 

 
</html>

是否有人可以幫助我。

來源

2015-08-19 user1234

我更改了原來的代碼，使其工作。希望這會幫助你學習一些角度:)

<!DOCTYPE html> 
 
<html data-ng-app="loginAuth"> 
 
\t <head> 
 
\t \t <title> 
 
\t \t </title> 
 
\t </head> 
 
\t <body> 
 
\t 
 
\t <h2>Angular Authentication</h2> 
 

 
\t <div data-ng-controller="loginController"> 
 
\t \t <label>Username</label> 
 
\t \t <input type="text" name="username" data-ng-model="login.username"/> 
 
\t \t <br/> 
 
\t \t 
 
\t \t <label>Password</label> 
 
\t \t <input type="password" name="password" data-ng-model="login.password"/> \t 
 
\t \t <br/> 
 
\t \t 
 
\t \t <input type="button" ng-click="login.submit(login.username, login.password)" value="Login"/> 
 
\t \t <br/><br/> 
 
\t \t {{login.message}} 
 
\t </div> 
 
\t 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 
 
\t 
 
\t <script> 
 
\t 
 
\t 'use strict'; 
 
\t 
 
\t angular.module('loginAuth', []) 
 
\t .controller('loginController', function ($scope) { 
 
    $scope.login = {}; 
 
\t $scope.login.submit = function(username, password) 
 
\t { 
 
\t \t if (username === 'admin' && password === 'test99') 
 
\t \t { 
 
\t \t onSuccess(); 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t onError({message:'login failed'}); 
 
\t \t } 
 
\t } 
 
\t 
 
\t function onSuccess() 
 
\t { 
 
\t \t $scope.login.message = 'Login Successful!'; 
 
\t } 
 
\t function onError(reason) 
 
\t { 
 
\t \t $scope.login.message = reason.message; 
 
\t } 
 

 
\t }); 
 
\t 
 
\t </script> 
 
\t </body> 
 

 
</html>

來源

2015-08-19 22:10:31

Thanks！這很有效，我看到我使用了ng-submit，而不是ng-click作爲按鈕事件。再次感謝你！ – user1234

您的應用程序應該以適當的方式進行定義。

angular.module('loginAuth', [])

你也需要定義你的控制器方法正確

控制器

angular.module('loginAuth') 
.controller('loginController', function($scope) { 
    $scope.login = {}; 
    $scope.login.submit = function(username, password) { 
    if (username === 'admin' && password === 'test99') { 
     //.then(onSuccess); //this is something wiered 
    } else { 
     //.catch(onError); //this is something wiered 
    } 
    } 

    function onSuccess() { 
    $scope.login.message = 'Login Successful!'; 
    } 

    function onError(reason) { 
    $scope.login.message = reason.message; 
    } 

});

來源

2015-08-19 21:12:17

我改變了我的代碼看起來像下面的東西，仍然是無法通過的問題得到 \t angular.module（'loginAuth 」，[]） \t .controller（ '的LoginController'，函數（$範圍） \t { \t \t 功能login.submit（用戶名，密碼） \t { \t \t如果（用戶名=== '管理員' &&密碼=== 'test99'） \t \t { \t \t login.message = '登錄成功！'; \t \t} \t \t其他 \t \t { \t \t login.message = '登錄失敗！'; \t \t} \t} – user1234

你已經聲明函數的方式是錯誤的。請看看我在我的答案中添加的代碼。 –

謝謝你。我看到了這個問題，控制器似乎現在在網頁中正常加載，並且我沒有在屏幕上顯示{{login.message}}綁定。但是，數據綁定在驗證成功或身份驗證失敗後似乎不起作用。對不起，如果我問的太多了，但我想知道他們的基礎知識的正確性 – user1234

無法訪問Angular JS中的控制器

回答

相關問題