簡單的$範圍測試不起作用

Question

我想要做一個簡單的$範圍控制器的做法。該應用程序應該顯示的結果表達式，如果文本值是正確的......

<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!"; 
       } 
      } 
     }; 
    }); 

伍模型是唯一正常工作。

謝謝！

Answer 1

每個控制器函數每個負載調用一次（如構造函數）。這意味着你在開始時只檢查你的價值一次。

您需要創建您的控制器，這將是每一個變化跑出裏面的函數：

<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

另外請注意，您的directive名稱需要駝峯。然後，當您將您的指令放入模板中時，您會爲每個以大寫字母開頭的單詞使用連字符。

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