AngularJS | Plnkr |观看表达

时间:2016-09-05 09:02:35

标签: javascript angularjs

我是angularjs的新手。我试图在plnkr中运行$ watch的示例代码,但是,我无法触发监视表达式。我需要触发摘要周期吗?

<!DOCTYPE html>
<html>    
  <head>
    <script data-require="angular.js@1.2.0" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>    
  <body ng-app="funny" ng-controller="funController">
    <input value="{{random.text}}" />
    <div>{{number}}</div>
  </body>    
</html>
<script type="text/javascript>
    var fun = angular.module("funny",[]);
    fun.controller("funController", function($scope) {
      $scope.random = { text : "les c!" };
      $scope.number = Math.random();

      $scope.$watch("random.text", function() {
        $scope.number = Math.random();
      });
    });
</script>

这是一个Plunker链接https://plnkr.co/edit/nfkQ6p4nc6MRwThay8Hd?p=preview

1 个答案:

答案 0 :(得分:1)

以下是解决方案:

https://plnkr.co/edit/WpIS2YffE5NabayejJsZ?p=preview

你应该使用 ng-model ,因为value - isn&#t; angular指令。使用ng-model时,angular会自动运行digest

<input ng-model="random.text" />

顺便说一句,在控制器中使用scope.watch是一种不好的做法。最好在输入和呼叫控制器功能上设置ng-change

所以这是一个更清洁的解决方案https://plnkr.co/edit/iVBWdYhvnfJszNIPteuh?p=preview