Simple $ Scope Test funktioniert nicht

Question

Ich versuche, eine einfache $ Scope Controller Praxis zu tun. Die App sollte das Ergebnis Ausdruck zeigen, wenn der Text Wert die richtige ist ...

<scope-test> 
    <h2>My Name?</h2> 
    <input type="text" ng-model="text"/> 
    <p>{{text}} {{result}}</p> 
</scope-test> 

Und das ist die App ...

angular.module('angular-tests', []) 
    .directive('scope-test', function(){ 
     return{ 
      restrict:'E', 
      controller: function($scope){ 
       if ($scope.text === "alex") { 
       $scope.result = "is correct!"; 
       } else { 
       $scope.result = "is not correct!"; 
       } 
      } 
     }; 
    }); 

Ng-Modell das einzige, was funktioniert gut ist.

Danke!

Answer 1

Jede Controller-Funktion wird einmal pro Ladevorgang aufgerufen (wie ein Konstruktor). Es bedeutet, dass Sie Ihren Wert nur einmal zu Beginn überprüfen.

Sie benötigen eine Funktion in Ihrem Controller erstellen, die von jeder Änderung lief werden:

<scope-test> 
    <h2>My Name?</h2> 
    <input type="text" ng-model="text" ng-change="changeHandler" /> 
    <p>{{text}} {{result}}</p> 
</scope-test> 

angular.module('angular-tests', []) 
    .directive('scope-test', function(){ 
     return{ 
      restrict:'E', 
      controller: function($scope){ 
       $scope.changeHandler = function(){ 
        if ($scope.text === "alex") { 
         $scope.result = "is correct!"; 
        } else { 
         $scope.result = "is not correct!"; 
        } 
       } 
      } 
     }; 
    }); 

Answer 2

Beachten Sie auch, dass Ihr directive Name Camelcase werden muss. Wenn Sie Ihre Anweisung in die Vorlage einfügen, verwenden Sie Bindestriche für jedes Wort, das mit einem Großbuchstaben beginnt.

<scope-test> 
    <h2>My Name?</h2> 
    <input type="text" ng-model="text" ng-change="evaluateText()"/> 
    <p>{{text}} {{result}}</p> 
</scope-test> 

angular.module('angular-tests', []) 
    .directive('scopeTest', function(){ 
    return{ 
     restrict:'E', 
     controller: function($scope){ 

     $scope.evaluateText = function() { 
      if ($scope.text === "alex") { 
      $scope.result = "is correct!"; 
      } else { 
      $scope.result = "is not correct!"; 
      } 
     }; 

     $scope.evaluateText(); 
     } 
    }; 
    }); 

Answer 3

Die einfachste Lösung wäre, eine Uhr in Ihre Richtlinie aufzunehmen.

Angular-Code

var myApp = angular.module('myApp',[]) 
    .directive('scopeTest', function(){ 
    return{ 
     restrict:'E', 
     controller: function($scope) { 
       $scope.$watch('text', function() { 
        if ($scope.text === "alex") { 
        $scope.result = "is correct!"; 
        } else { 
        $scope.result = "is not correct!"; 
        } 
      }) 
     } 
    }; 
}); 

HTML-Code

<scope-test> 
    <h2>My Name?</h2> 
    <input type="text" ng-model="text"/> 
    <p>{{text}} {{result}}</p> 
</scope-test> 

Hoffe, es hilft!

Hier ist die Geige: http://jsfiddle.net/au2uL08u/