AngularJS Selecciona la Directiva, $ CUESTIONES DE DIGESTRO

Question

Tengo problemas para usar el reloj dentro de una directiva junto con un complemento de terceros llamado Seleccionar.

He leído mucho sobre $ Digest / $ Watch, pero todavía tengo problemas.

Mi ejemplo a continuación "Funciona", pero estoy tratando de evitar los errores de generación de generación.

Puede haber una mejor manera de abordar esto, simplemente no estoy seguro de cómo también.

plunker : http://plnkr.co/edit/3jjtseu2blxpwhtw6haw? P= Vista previa

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

Intenta envolver las llamadas a la tercera parte dentro de un tiempo de espera de $:

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

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

}, 0);

y no olvides inyectar $ TIMEOUT.

Con un tiempo de espera de cero (dejando de lado el valor por defecto de los valores predeterminados también ...), cree Esto está garantizado para ejecutarse durante el siguiente bucle DIGEST, previniendo así los errores que ya están en progreso.Alguien, por favor, por favor, si es correcto, pero he usado este truco para resolver los errores de resumen al llamar a algunas funciones de terceros (TinyMCE) JavaScript.

Ver la explicación de Betaorbust en esto así que POST: AngularJS: Evite el error $ DigestS ya en progreso al llamar a $ alcance. $ Aplicar ()

Answer 2

Recientemente creé una directiva para SELECCIONAR que admite la unión de 2 vías del modelo y las opciones.También tuve que usar $ TIMEOUT.

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

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

Aquí están las partes esenciales de la Directiva.Despojé de una funcionalidad adicional que está en la versión completa.

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