角度コントローラのメソッドは、私がやろうとしていますどのような範囲

Question

の古い値を与える：

私は、テキスト入力フィールドを持つディレクティブを作成しています。また、値とonChangeメソッドをスコープパラメータとして取ります。 htmlにあるようにコントローラがこのディレクティブを覆い、このコントローラはonChangeメソッドの実装とvalueのモデルを提供します。

私が直面しています問題：

はライン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) 
    } 

}) 

はHTML

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

。またこれは、共同でJSFIDDLE

Answer 1

でコピーをチェックしています両方向=バインディングと式&バインディングの両方を使用してスコープが分離されているディレクティブとコンポーネントでは、mmonの問題が発生します。双方向バインディング は、独立スコープから親スコープに値を転送するウォッチャーを使用します。ウォッチャーの汚れチェックと実行は、の後にの式バインディングの呼び出しが発生します。式が実行されてから親スコープに値が転送されるまでの間に遅延があります。

解決策は、式バインディングが呼び出されるときにローカルとして値を公開することです。どの表現でもダイジェストサイクルを待つのではなく、その値をすぐに利用できるようになります。親コントローラでHTML

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

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>', 
    } 
}) 

は、関数の引数として提供値を使用します。

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

[角度ngChangeハンドラのDEMO in JSFiddle