ng-model不在範圍內

Question

我正在創建一個應用程序，而且我沒有在控制器範圍內獲得ng-model值。當頁面正在加載時，它將發送給控制者，但是價值從ng-model未定義到控制器的範圍。 這裏是HTML：

<form class="form-signin" id="loginForm"> 
    <h2 class="form-signin-heading">Por Favor Ingresar</h2> 
    <label for="matricula" class="sr-only">Matricula</label> 
    <input type="text" ng-model="matricula" id="matricula" class="form-control" placeholder="Matricula" required="" autofocus=""> 
    <label for="inputPassword" class="sr-only">Contraseña</label> 
    <input type="password" ng-model="contrasena" id="inputPassword" class="form-control" placeholder="Contraseña" required=""> 
    <div class="checkbox"> 
     <label> 
     <input type="checkbox" ng-model="acuerdate" value="remember-me"> Acuérdate de mí 
     </label> 
    </div> 
    <button class="btn btn-lg btn-primary btn-block" ng-click="login.getAuthenticate()" type="submit">Ingresar</button> 
    </form> 

控制器低於：

angular.module('myApp') 
    .controller('LoginController', LoginController); 

    LoginController.$inject = ["$scope",'LoginService','Common.Services.Navigation','Common.Constants.Routes']; 

    function LoginController($scope,loginService,navigate,route){ 
     var login =$scope; 
     var request ={'matricula':login.matricula}; /***Here the Value is undefined**/ 

     login.getAuthenticate = getAuthenticate; 
     function getAuthenticate(){ 
     loginService.doRequest(request).then(function() {      
      navigate.navigate(route.routes.cardDetails); 
     }),function (error) { 
      //Handle the Error Handle 
      //Its pending to show Device native alert message 
      //or TOAD MESSAGE 
     }; 
     } 
    } 

請幫我你的建議。

Answer 1

移動request對象的分配給getAuthenticate函數的內部。

function getAuthenticate(){ 
    var request ={'matricula':login.matricula}; 
    loginService.doRequest(request).then(function() {      
     navigate.navigate(route.routes.cardDetails); 
    }),function (error) { 
     //Handle the Error Handle 
     //Its pending to show Device native alert message 
     //or TOAD MESSAGE 
    }; 
    } 

當第一次初始化控制器，該值將是不確定的。

但是，如果你@charlietfl暗示什麼話，就可以工作方式與你有上面的方式。使用對象做你ng-model綁定

一種方式是通過在控制器中創建對象，然後引用在HTML中的對象。

模板：

<input type="text" ng-model="login.matricula" id="matricula" class="form-control" placeholder="Matricula" required="" autofocus=""> 
... 
<input type="password" ng-model="login.contrasena" id="inputPassword" class="form-control" placeholder="Contraseña" required=""> 

控制器：

function LoginController($scope,loginService,navigate,route){ 
    var login = { 
    matricula: null, 
    contrasena: null 
    }; 
    $scope.login = login; // expose the above login object as login on the scope 

    // now the request object will always have the model value when it accessed 
    var request ={'matricula':login.matricula}; /***Here the Value is undefined**/ 

    ... 
} 

或者與最新的角度實際上是使用了 「控制器」 語法的推薦方式。然後，您不需要在控制器中使用$scope，並將變量綁定到this。

模板：

<div ng-controller="LoginController as login"> <!-- note this change --> 
    <input type="text" ng-model="login.matricula" id="matricula" class="form-control" placeholder="Matricula" required="" autofocus=""> 
    ... 
    <input type="password" ng-model="login.contrasena" id="inputPassword" class="form-control" placeholder="Contraseña" required=""> 
    ... 
    <button class="btn btn-lg btn-primary btn-block" ng-click="login.getAuthenticate()" type="submit">Ingresar</button> 
</div> 

控制器：

// no more $scope dependency needed 
function LoginController(loginService,navigate,route){ 
    var login = this; // store a reference to 'this' as login 
    var request ={'matricula':login.matricula}; 

    login.getAuthenticate = getAuthenticate; 
    function getAuthenticate(){ 
    ... 
    } 
}