Angular Directive関数呼び出しで親モデルが更新されないのはなぜですか？

Question

http://jsfiddle.net/2dgzt18a/

入力でEnterキーを押したときに、親モデルが更新されることを期待しています。しかし、それはしません。コンソールログからの出力は、それを実行する必要があるように有望です。 $ watchを使用する必要がありますか？それを疑うが、私は尋ねると思った。

HTML

<div data-ng-app="testApp"> 
    <div data-ng-controller="testCtrl"> 
     <strong>{{pkey}}</strong> 
     <span data-test-directive 
       data-parent-item="pkey" 
       data-parent-update="update(pkey)"></span> 
    </div> 
</div> 

DIRECTIVE

var testApp = angular.module('testApp', []); 

testApp.directive('testDirective', function ($timeout) { 
    return { 
     scope: { 
      key: '=parentItem', 
      parentUpdate: '&' 
     }, 
     replace: true, 
     template: '<div><input type="text"></input></div>', 
     link: function(scope, elem, attrs) { 
      elem.bind('keydown keypress', function(event) { 
       if (event.which === 13) { 
        scope.parentUpdate({ pkey: 'D+' + scope.key}); 
        event.preventDefault(); 
       } 
      }) 
     } 
    }; 
}); 

CONTROLLER私はディレクティブのコントローラを使用して、この作品を見ていると信じていますが、

testApp.controller('testCtrl', function ($scope) { 
    $scope.pkey = 'golden'; 
    $scope.update = function (k) { 
     // Expecting local variable k, or $scope.pkey to have been 
     // updated by calls in the directive's scope. 
     console.log('CTRL:', $scope.pkey, k); 
     $scope.pkey = 'C+' + k; 
     console.log('CTRL:', $scope.pkey); 
    }; 
}); 

私は、に興味があるので、 Keypressイベント、なぜ私はリンクを使用する必要があります。

Answer 1

elem.bindは、js関数をイベントにバインドするだけです。

scope.$apply()を追加します。

P.S.つまり、ng-clickはほぼ同じです：イベントをバインドし、コールバックの後にコールを適用します。

P.S.1。あなたがより現代的な角度バージョンを使用できる場合 - ng-keypressと同様の指令があります。

Answer 2

スコープ。$ applyは使用することをお勧めしません。 $タイムアウトを使用することをお勧めし

$タイムアウトが角度伝えるため、現在のサイクルの後、 がタイムアウト待機し、この方法、それがあることを「すでに 進行中$ダイジェスト」のようなエラーが発生しない$タイムアウト ダイジェストサイクル間の衝突がないことを保証し、$ timeoutの出力は が新しい$ダイジェストサイクルで実行されます