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(){ 
    ... 
    } 
}