Javascript 角度JS中的双向绑定_Javascript_Html_Angularjs_Angularjs Scope

Javascript 角度JS中的双向绑定

javascript html angularjs

Javascript 角度JS中的双向绑定,javascript,html,angularjs,angularjs-scope,Javascript,Html,Angularjs,Angularjs Scope,我对下面的代码有问题我的html页面代码： <body ng-app="myapp"> <div ng-controller="myController"> The message is {{message}} <input type="button" value="Change Message" ng-click="changeMessage()"> </div> 但是，如果使用changeMessa

我对下面的代码有问题

我的html页面代码：

<body ng-app="myapp">

    <div ng-controller="myController">
    The message is {{message}}
        <input type="button" value="Change Message" ng-click="changeMessage()">

   </div>

但是，如果使用changeMessage函数，即使出现console.log消息，也无法看到已更改的消息属性。这两种情况都缺少什么

提前感谢

超时完成后，您应该使用$digest（）

$scope.changeMessage=function()
{
   setTimeout(function(){
    $scope.message="Hurray !!! New Message";  
    $scope.$digest();
   },3000);
}

请注意，最好使用$digest而不是$apply（与性能相关）：

scope.$digest（）将在当前作用域及其所有子项上激发监视程序。作用域。$apply将计算传递的函数并运行$rootScope。$digest（）

每个更改都应该在角度摘要周期内发生。如果从外部更改值（如果使用

setTimeout

而不是angular的

$timeout

），angular在下一个摘要周期（）之前不会更新视图（）。因此，在您的情况下，

消息

已设置，但视图尚未更新

试着这样做：

app.controller('myController', function($scope, $timeout) {
  $scope.changeMessage = function() {
    $timeout(function(){
      console.log("Message changed");
      $scope.message="Hurray !!! New Message";    
    }, 3000);

  $scope.newMessage=function() {
    $scope.message="hello";
    console.log("new message");
  };

该更改未反映在视图中的原因是因为赋值是在

setTimeout

中的回调中完成的，这导致angular没有注意到该更改。这与所谓的

摘要

循环有关。有不同的方法来解决这个问题

使用

$scope.$apply（）

包装您的作业

或者更好地使用angular提供的现有

$timeout

服务，而不是调用

setTimeout

，后者已经为您解决了上述问题

有关详细信息，请参阅了解$timeout的用法

以及美元申请背后的原因

有关此处发生的情况的一般说明，请参阅

app.controller('myController', function($scope, $timeout) {
  $scope.changeMessage = function() {
    $timeout(function(){
      console.log("Message changed");
      $scope.message="Hurray !!! New Message";    
    }, 3000);

  $scope.newMessage=function() {
    $scope.message="hello";
    console.log("new message");
  };