2016-05-24 6 views
-2

ich ein Problem mit kantigem Anwendungsbereich haben:Angular Umfang nicht aktualisiert, auch mit apply()

Init Eckig:

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

Script:

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> 

Wenn ich Vorname eingeben, reg .message wird nicht aktualisiert. Wenn ich aplly(), ist es auch Fehler verursacht hat, und nur angezeigt {{reg.message}} in HTML-Seite

<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> 

So wie kann ich reg.message aktualisieren, wenn reg.fname geändert?

+1

Sie $ scope, um injizieren sollte AngularJS Bindungen zu nutzen und anzuwenden $ –

+0

http: //www.w3schools .com/angular/angular_scopes.asp Hilfe für $ scope –

+0

@MohammadMc Nein, OP benötigt $ scope nicht. Und $ gelten auch. – dfsq

Antwort

0

Grundsätzlich möchten Sie die Eingabe auf keyPress validieren.

Sie sollten dies tun.

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

und in Controller

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

Was ist 'reg' ..? –

+0

@T J, siehe seinen HTML-Code für ControllerAs –

+0

Ah ... das ist nicht in Ihrer Antwort ... nvm. –

0

Sie Update-Funktion Richtlinie mit ng-Änderung ausgeführt werden kann. Arbeitsbeispiel in Plunker: https://plnkr.co/edit/KH6bhumLjz7VR1dmE16r?p=preview

In Controller:

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" /> 
Verwandte Themen