AngularJS seleziona la direttiva, $ digest problemi
-
20-12-2019 - |
Domanda
Ho problemi a utilizzare l'orologio all'interno di una direttiva insieme a un plugin di terze parti chiamato selezionati.
Ho letto molto su $ Digest / $ watch, ma sto ancora avendo problemi.
Il mio esempio sotto "funziona", ma sto cercando di impedire gli errori $digest already in progress
.
Potrebbe esserci un modo migliore per avvicinarsi a questo, non sono sicuro di come anche.
Plunker : http://plnkr.co/edit/3jjtseu2blxpwhtw6haw? P= Anteprima
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);
});
}
};
});
. Soluzione
Prova a avvolgere le chiamate alla terza parte all'interno di un timeout $ come questo:
$timeout(function() {
// clear options
selectize.clear();
selectize.clearOptions();
// add options
angular.forEach(newTags, function(tag) {
selectize.addOption(tag);
});
}, 0);
.
e non dimenticare di iniettare $ timeout.
Con un timeout di zero (lasciando il valore predefinito su 0 pure ...), i credi questo è garantito per essere eseguito durante il ciclo successivo digest, evitando così gli errori già in corso.Qualcuno per favore Chime in se è corretto, ma ho usato questo trucco per risolvere gli errori di digest quando si chiamano alcune funzioni JavaScript di terze parti (TinyMCE).
Vedi la spiegazione di Betaorbust in questo post: Angularjs: Impedire l'errore $ Digest già in corso quando si chiama $ Scope. $ Applica ()
Altri suggerimenti
Ho recentemente creato una direttiva per selezionarsi che supporta il legame a 2 vie del modello e delle opzioni.Ho anche dovuto usare il timeout $.
https://github.com/machineboy2045/angular-selectize
http://plnkr.co/edit/twgafu?p=preview .
Ecco le parti essenziali della direttiva.Ho spogliato alcune funzionalità aggiuntive che è nella versione 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);
})
}
}
};
});
.