AngularJSのディレクティブの親スコープに値を手動で伝播するにはどうすればよいですか？

Question

私AngularJSは、更新機能を親スコープに単一の値をバインドし、呼び出すためにFaveDirectiveニーズを先行入力するとき、その値の変更：

親HTML：

<div class="parent-controller-scope ng-scope"> 
    <my-fave-picker favorite="parent.favorite" on-change="parent.update()"> 
</div> 

フェイブピッカーディレクティブテンプレート：

<input 
    type="text" 
    ng-model="vm.favorite" 
    typeahead-on-select="vm.onChange()" 
    ng-init="vm.loadTypeaheadValues()" 
    placeholder="Pick your favorite Swift" 
    uib-typeahead="name for name in ::vm.TypeaheadValues | filter:$viewValue" 
    class="form-control">  

フェイブピッカーディレクティブコード：

(function (angular, _) { 
    'use strict'; 

    angular 
     .module('favorite') 
     .directive('MyFavePicker', function() { 
      return { 
       restrict: 'E', 
       templateUrl: 'fave-picker-template.html', 
       scope: { 
        favorite: '=', 
        onChange: '&' 
       }, 
       controllerAs: 'vm', 
       bindToController: true, 
       controller: 'FavePickerController' 
      }; 
     }) 
     .controller('FavePickerController', function() { 
      // etc. 
     }); 

}(angular, _)); 

これはほぼ正常に動作します。先行入力がコミットされると、目的の親スコープのupdate()が呼び出されます。問題は、の前にの最新の値favoriteが親スコープに伝播することです。言い換えると、先行入力が可能な値["Taylor Swift", "Jonathan Swift"]を持っている場合、私は「テイ」と入力して、その後、一度にtypeahead-on-selectコールバックが実行され、ドロップダウンリストから値を選択するためにEnterキーを押し、私は次の値があります。

vm.favorite = "Taylor Swift"  
parent.favorite = "Tay" 

を

したがって、parent.update()関数は、parent.favorite（「Taylor Swift」の代わりに「Tay」）の間違った値で動作します。

私はいくつかの悪い方法を考えることができますが、vm.favoriteへの変更はparent.favorite()を呼び出す前に、親スコープに戻って伝播されますように、これを行うための正しい方法は何ですか？

次のものが私の状況では不可能であることに注意してください：

• 親スコープを継承する代わりにタイムアウトを設定update（on-change="parent.update(favorite)"）
• への引数として分離株範囲
• favoriteを渡すを使用してdir.onChange()呼び出し前parent.update()

Answer 1

使用しないでください双方向、'='、値を伝播するコンポーネント内のバインディング。代わりに、出力の結合、入力および発現のために結合、'&'を一方向、'<'を使用する：コンポーネントテンプレートに

<my-fave-picker favorite="parent.favorite" 
    on-change="parent.favorite=$value; parent.update($value)"> 
</my-fave-picker> 

app.directive('MyFavePicker', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'fave-picker-template.html', 
     scope: { 
      ̶f̶a̶v̶o̶r̶i̶t̶e̶:̶ ̶'̶=̶'̶,̶ 
      favorite: '<', 
      onChange: '&' 
     }, 
     controllerAs: 'vm', 
     bindToController: true, 
     controller: 'FavePickerController' 
    }; 
}) 

：

<input 
    type="text" 
    ng-model="vm.favorite" 
    ng-change="vm.onChange({$value: vm.favorite})" 
    typeahead-on-select="vm.onChange({$value: vm.favorite})" 
    ng-init="vm.loadTypeaheadValues()" 
    placeholder="Pick your favorite Swift" 
    uib-typeahead="name for name in ::vm.TypeaheadValues | filter:$viewValue" 
    class="form-control" 
/>  

の値を適用することにより式'&'、バインディング、値はすぐに伝播します。双方向の'='バインディングでは、値はダイジェストサイクルの後に伝搬されます。

詳細については、あなたが角度（別名角度2及び4）に言及し、AngularJS（別名角1.1）でタグ付け

• AngularJS Comprehensive Directive API Reference - scope
• AngularJS Developer Guide - Component Based Application Architecture