angularjs - Angular Controller 方法给出了较旧的范围值

Question

What i am trying to do:

我正在创建一个带有输入文本字段的指令。还将 value 和 onChange 方法作为范围参数。
正如您在 html 中看到的那样， Controller 包裹在该指令上，该 Controller 提供 onChange 方法的实现和值的模型。

Issue i am facing:

见行 console.log($scope.data) :此语句在控制台中打印数据对象的旧值。

任何猜测为什么会发生。

JS codde

   angular.module('APP', [])
    .directive('txtInput', function () {
      return {
        restrict: "E",
        replace: true,
        scope: {
            value: '=',
            onChange: '&',
        },
        template: 
          '<div>'+
            '<input type="text" '+
              'ng-change = "onChange()" '+
              'ng-model="value" />'+
          '</div>',
    }
})
.controller('pageCtrl', function($scope) {
  $scope.data = {
    userPost: "sdsds",
  }
  $scope.onPostInputChange = function() {
    console.log($scope.data)
  }

})

Here is the HTML

<div ng-app='APP' ng-controller="pageCtrl">
    <txt-input 
        value="data.userPost"
        on-change="onPostInputChange()"> </txt-input>
  </div>

另请查看 JSFIDDLE 的副本

Answer 1

这是双向使用时的常见问题 =绑定(bind)和表达&在具有隔离范围的指令和组件中绑定(bind)。双向绑定(bind)
使用观察者将值从隔离范围传输到父范围。观察者的脏检查和执行发生 之后 表达式绑定(bind)的任何调用。表达式执行与将值传输到父作用域之间存在延迟。

解决方案是在调用表达式绑定(bind)时将值公开为本地值。然后，任何表达式都将立即获得该值，而不是等待摘要循环。

angular.module('APP', [])
    .directive('txtInput', function () {
      return {
        restrict: "E",
        replace: true,
        scope: {
            value: '=',
            onChange: '&',
        },
        template: 
          '<div>'+
            '<input type="text" '+
              //'ng-change = "onChange()" '+
              //expose value as a local
              'ng-change = "onChange({$value: value}) '+
              'ng-model="value" />'+
          '</div>',
    }
})

HTML

<div ng-app='APP' ng-controller="pageCtrl">
    <txt-input 
        value="data.userPost"
        on-change="onPostInputChange($value)">
    </txt-input>
</div>

在父 Controller 中，使用提供的值作为函数的参数:

angular.module('APP').controller('pageCtrl', function($scope) {
  $scope.data = {
    userPost: "sdsds",
  }
  $scope.onPostInputChange = function(value) {
    //console.log($scope.data)
    console.log(value);
  }
})

DEMO in JSFiddle