javascript – Angularjs选择指令,$摘要问题

我在指令中使用了一个名为selectize的第三方插件时遇到了麻烦.

我已经阅读了很多关于$digest / $watch的内容,但我仍然遇到问题.

下面我的例子“有效”,但我试图阻止$digest已经在进行中的错误.

可能有更好的方法来解决这个问题,我不知道怎么做.

plunker：http://plnkr.co/edit/3JjTsEU2BlxPWHtw6HaW?p=preview

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);
    });
  }
};
});

解决方法:

尝试将调用包装到$timeout内的第三方,如下所示：

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

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

}, 0);

并且不要忘记注入$timeout.

如果超时为零(也将默认值保留为0 ……),我相信这可以保证在下一个摘要循环期间运行,从而防止已经在进行中的错误.如果这是正确的,请有人请插入,但我在调用某些第三方(tinyMce)javascript函数时使用此技巧来解决摘要错误.

请参阅此SO帖子中的betaorbust的解释：AngularJS : Prevent error $digest already in progress when calling $scope.$apply()

标签：javascript,angularjs,angularjs-directive,selectize-js
来源： https://codeday.me/bug/20190728/1563486.html