2016-05-24 2 views
-2

У меня есть проблема с областью ANGULAR в:Угловая область видимости не обновляется даже применить()

Init угловой:

<html lang="en" ng-app="ant101App" ng-controller="regFormController as reg"> 

Сценарий:

script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script> 
    var app = angular.module('ant101App',[]); 
    app.controller('regFormController', function() { 
     this.message = null; 
     if ((''+this.fname).length > 15) { 
       this.message = 'First name should be less than 16 characters!'; 
     } 
    }); 
</script> 

HTML:

<p>{{reg.message}}</p> 

<input ng-model="reg.fname" type="text" name="firstname" class="afirst-name-box" placeholder="First name" required> 

Когда я ввожу имя, рег .message не обновляет. Когда я использую aplly(), он даже вызвал ошибку, и только отображается {{}} reg.message в HTML странице

<script> 
    var app = angular.module('ant101App',[]); 
    app.controller('regFormController', function() { 
     this.message = null; 
     this.$apply(function(){ 
      if ((''+this.fname).length > 15) { 
        this.message = 'First name should be less than 16 characters!'; 
      } 
     }); 
    }); 
</script> 

Так как я могу обновить reg.message когда reg.fname изменилось?

+1

вы должны вводить $ объем для того, чтобы использовать angularjs привязок и $ применять –

+0

Http: //www.w3schools .com/угловая/угловая_scopes.asp помощь для $ scope –

+0

@MohammadMc Нет, OP не нуждается в $ scope. И $ применяются тоже. – dfsq

ответ

0

В принципе, вы хотите проверить ввод на keyPress.

Вы должны это делать.

<input ng-model="reg.fname" type="text" name="firstname" class="afirst-name-box" placeholder="First name" required ng-keypress="reg.validateName()"> 

и контроллер

app.controller('regFormController', function() { 
     this.message = null; 
     this.validateName = function() { 
      if ((''+this.fname).length > 15) { 
       this.message = 'First name should be less than 16 characters!'; 
      } 
     };  
    }); 
+0

Что такое 'reg' ..? –

+0

@T J, см. Его html-код для контроллераAs –

+0

А ... этого нет в вашем ответе ... nvm. –

0

Вы можете запустить функцию обновления с нг-изменения директивы. Работа в пример Plunker: https://plnkr.co/edit/KH6bhumLjz7VR1dmE16r?p=preview

В контроллере:

this.updateName = function() { 
     if ((''+this.fname).length > 15) { 
      this.message = 'First name should be less than 16 characters!'; 
    } 

HTML:

<input ng-change="reg.updateName()" type="text" required="" placeholder="First name" class="afirst-name-box" name="firstname" ng-model="reg.fname" /> 
Смежные вопросы