Angularjs는 지침, $ Digest 문제를 선택합니다

Question

Selectize라는 제 3 자 플러그인과 함께 지침 내부에 시계를 사용하여 시계를 사용하는 데 어려움을 겪고 있습니다.

$ digest / $ watch에 대해 많이 읽었지만 여전히 문제가 있습니다.

"Works"아래의 예에서는 $digest already in progress 오류를 방지하려고합니다.

이 문제에 접근하는 더 좋은 방법이있을 수 있습니다. 메신저도 잘 모르겠습니다.

plunker : http://plnkr.co/edit/3jjtseu2blxpwhtw6hhaw? 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

다음과 같이 $ 시간 초과 내에서 전화를 제 3 자로 래핑 해보십시오 :

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

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

}, 0);

.

및 $ 시간 초과를 주입하는 것을 잊지 마십시오.

0의 시간 초과 (기본값은 기본값을 0으로 출구 ...), i 믿습니다 다음 다이제스트 루프 동안 실행되도록 보장되어 이미 진행중인 오류가 발생할 수 있습니다.누군가가 올바른지, 제 3 자 (tinymce) 자바 스크립트 함수를 호출 할 때 다이제스트 오류를 해결하기 위해이 트릭을 사용했습니다.

Betaorbust의 설명을 참조하십시오.: $ Scope를 호출 할 때 $ 적용 ()

에 대해 이미 진행중인 오류 $ 다이제스트를 방지합니다.

Answer 2

나는 최근 모델 및 옵션의 2 방향 바인딩을 지원하는 선택화를 위해 지시문을 만들었습니다.나는 또한 $ timeout을 사용해야했다.

https://github.com/machineboy2045/angular-selectize

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

여기에 지시문의 필수 부분이 있습니다.전체 버전에있는 추가 기능을 제거했습니다.

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

.