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

每个控制器函数在每次加载时调用一次（如构造函数）。这意味着您只能在开始时检查一次值。

您需要在控制器中创建一个函数，该函数将在每次更改时运行：

<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

最简单的解决方案是在指令中加入手表。

角色代码

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/

Answer 3

另请注意，您的directive名称必须是camelCase。然后，当您将指令放在模板中时，对每个以大写字母开头的单词使用连字符。

<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();
      }
    };
  });

简单的$ scope测试不起作用

3 个答案: