angularjs - ui-select2 ディレクティブ内で外部スコープにバインド

Question

select2 入力をディレクティブ内にネストしており、選択した値を外側のスコープにバインドしたいと考えています。どうやってやるの。 プランカーの例

指令コード:

app.directive('optionChoices', function () {
  return {
    restrict: 'EA',
    scope: {
      type: '=',
      selections: '='
    },
    template: '<input ng-if="type === 1" ui-select2="textChoices" ' +
                'ng-model="selections" style="width:200px" />' +
                '<input ng-if="type === 2" ui-select2="colorChoices" ' +
                'ng-model="selections" style="width:200px" />' + 
                '{{\'inner:\' + selections}}',
    link: function (scope, element, attrs) {
      function Query(query) {
        var data={
            results:[]
        };
        if (query.term.length > 0) {
            data.results.push({id:query.term,text:query.term});
        }
        query.callback(data);
      }
      scope.textChoices = {
        query: Query,
        tags: [],
        initSelection: function () {}
      };
      scope.colorChoises = angular.extend({}, scope.textChoices, {
        formatSelection: function(state) {
            if (!state.id) return state.text;
            return "<div style='background-color:yellow;'>&nbsp;</div>" + state.text;
        }
      });
    }
  };
});

Answer 1

私は問題を見つけました、そしてそれはそれほど難しいことではありません。分離されたスコープを作成するとき、角度が変数の別のインスタンスを作成する場合、親スコープにバインドすることはできません。$parent、または親オブジェクトにバインドする必要があるだけです。

scope: {
      option: '='
    }

そしてテンプレートで：

template: '<input ng-if="option.type === 1" ui-select2="textChoices" ' +
                'ng-model="option.selections" style="width:200px" />' +
                '<input ng-if="option.type === 2" ui-select2="colorChoices" ' +
                'ng-model="option.selections" style="width:200px" />' + 
                '{{\'inner:\' + selections}}',

楽しい！