нг-модель не входит в сферу

Question

нг-модель не входит в сферу

0

Я создаю одно приложение, и я не получаю значение ng-model в объеме контроллера. Когда страница загружается, она переходит к контроллеру, но значение не определено из ng-модели в область действия контроллера. Вот 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
        };
      }
    }

Пожалуйста, помогите мне с вашими предложениями.

s_k_t 06 окт. 2015, в 02:13

Источник

3

всегда .. всегда .. всегда используйте объект в ng-model ... дочерние области будут нарушать привязки при использовании примитива
charlietfl 06 окт. 2015, в 00:31

Теги:

javascript

angularjs

angularjs-scope

angularjs-directive

1 ответ

Ещё вопросы

всегда .. всегда .. всегда используйте объект в ng-model ... дочерние области будут нарушать привязки при использовании примитива

JoseM · Answer 1 · 2015-10-05T22-57-00.000Z

Переместите назначение объекта 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(){
    ...
  }
}