AngularJSディレクティブ、$ダイジェストの問題を選択します

Question

ディレクティブの内側の腕時計を使って、選択された3番手のプラグインと呼ばれる第三者のプラグイン。

$ Digest / $ Watchについてはたくさん読んでいますが、まだ問題があります。

マイ例は「Works」ですが、$digest already in progressエラーを防ぐことを試みます。

これに近づくより良い方法があるかもしれません、imはわからないかわからない。

プランクタル： http://plnkr.co/edit/3jjtseu2blxpwhtw6haw？P=プレビュー

app.directive('selectize', function($parse) {
return {
  restrict: 'A',
  require: ['ngModel'],
  scope: {
    ngModel: '=',
    options: '='
  },
  link: function(scope, el, attrs) {

    var $select = el.selectize({
      valueField: 'id',
      labelField: 'name'
    });

    var selectize = $select[0].selectize;

    // add options
    angular.forEach('options', function(tag) {
      selectize.addOption(tag);
    });

    scope.$watchCollection('options', function(newTags, oldTags) {

      // why are these the same objects?
      console.log('newTags', newTags);
      console.log('oldTags', oldTags);

      if (newTags !== oldTags) {
        // clear options
        selectize.clear();
        selectize.clearOptions();

        // add options
        angular.forEach(newTags, function(tag) {
          selectize.addOption(tag);
        });
      }

    });

    // if value changes without selecting an option,
    // set the option to the new model val
    scope.$watch('ngModel', function(val) {
      console.log('val', val);
      // selectize.setValue(val);
    });
  }
};
});

.

Answer 1

このような$ TIMEOUT内の3番手側への呼び出しを試してみてください。

$timeout(function() {
    // clear options
    selectize.clear();
    selectize.clearOptions();

    // add options
    angular.forEach(newTags, function(tag) {
      selectize.addOption(tag);
    });

}, 0);

.

と$ TIMEOUTを忘れないでください。

ゼロのタイムアウトで（デフォルトを除外する）、I は次のダイジェストループ中に実行されることが保証されているため、既に進行中のエラーが発生します。誰かがそれが正しい場合にチャイムを入れてくださいが、サードパーティ（Tinymce）JavaScript関数を呼び出すときにダイジェストエラーを解決するためにこのトリックを使用しました。

これでBetaorbustの説明を参照してください。 angularjs：$ scopeを呼び出すときに該当な$ Digestがすでに進行中のエラー$ダイジェストを防ぎます。$ apply（）

Answer 2

最近、モデルの2方向バインディングをサポートする選択を選択するための指令とオプションを作成しました。私はまた$ timeoutを使わなければなりませんでした。

https://github.com/machineBoy2045/angular - 選択

http://plnkr.co/edit/twgafu?p=preview

これは指令の本質的な部分です。フルバージョンの追加機能を取り除きました。

app.directive('selectize', function($timeout) {
  return {
    restrict: 'A',
    require: '^ngModel',
    link: function(scope, element, attrs, ngModel) {

      var config = scope.$eval(attrs.selectize);
      config.options = scope.$eval(attrs.options) || [];
      element.selectize(config);
      var selectize = element[0].selectize;

      selectize.on('option_add', refreshAngularOptions);
      scope.$watch(function(){ return ngModel.$modelValue}, refreshSelectize, true)

      function refreshAngularOptions(value, data) {
        config.options = selectize.options;
      }

      function createOption(opt){
        var newOpt = {};
        newOpt[selectize.settings.valueField] = opt;
        newOpt[selectize.settings.labelField] = opt;
        selectize.addOption(newOpt);
      }

      function refreshSelectize(value){
        $timeout(function(){
          if(angular.isArray(value))
            angular.forEach(value, createOption);
          else
            createOption(value);

          selectize.refreshOptions(false);
          selectize.setValue(value); 
        })
      }
    }
  };
});

.