シンプルな$ scopeテストが動作しない

Question

シンプルな$ scopeコントローラの練習をしようとしています。テキスト値が正しいもの...

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

であり、これはアプリであればアプリは、結果の発現を示す必要があります...

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-モデルが正常に動作して唯一のものです。

ありがとうございます！

Answer 1

各コントローラ関数は、コンストラクタのようにロードごとに1回呼び出されます。つまり、最初に値を確認するだけです。また、あなたのdirective名はキャメルケースする必要があることに注意してください

<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

：

あなたがそれぞれの変更によって実行されますあなたのコントローラ、内部の関数を作成する必要があります。テンプレート内にディレクティブを配置すると、大文字で始まる単語ごとにハイフンが使用されます。

<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

最も簡単な解決策は、あなたの指示に時計を入れることです。

角度コード

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コード

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

それが役に立てば幸い！

ここはフィドルです。http://jsfiddle.net/au2uL08u/