Angularjs Selectize-Direktive, $ Digest-Probleme
-
20-12-2019 - |
Frage
Ich habe Probleme, watch innerhalb einer Direktive zusammen mit einem 3rd-Party-Plugin namens selectize zu verwenden.
Ich habe viel über $ digest / $ watch gelesen, habe aber immer noch Probleme.
Mein Beispiel unten "funktioniert", aber ich versuche das zu verhindern $digest already in progress
Fehlermeldung.
Es könnte einen besseren Weg geben, dies anzugehen, ich bin mir nur nicht sicher, wie auch.
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);
});
}
};
});
Lösung
Versuchen Sie, die Anrufe an die 3. Partei in ein $ timeout wie folgt einzuschließen:
$timeout(function() {
// clear options
selectize.clear();
selectize.clearOptions();
// add options
angular.forEach(newTags, function(tag) {
selectize.addOption(tag);
});
}, 0);
Und vergiss nicht, $ timeout zu injizieren.
Mit einem Timeout von Null (wobei der Wert standardmäßig auch auf 0 gesetzt wird ...), I glauben dies wird garantiert während der nächsten Digest-Schleife ausgeführt, wodurch die bereits laufenden Fehler verhindert werden.Bitte meldet euch, wenn das richtig ist, aber ich habe diesen Trick verwendet, um die Digest-Fehler beim Aufrufen von Javascript-Funktionen von Drittanbietern (TinyMCE) zu beheben.
Siehe betaorbusts Erklärung in diesem SO-Beitrag: AngularJS :Verhindern Sie, dass der Fehler $ digest bereits ausgeführt wird, wenn $ scope aufgerufen wird.$gelten()
Andere Tipps
Ich habe kürzlich eine Direktive für Selectize erstellt, die die 2-Wege-Bindung des Modells und der Optionen unterstützt.Ich musste auch $ timeout verwenden.
https://github.com/machineboy2045/angular-selectize
http://plnkr.co/edit/twGAfU?p=preview
Hier sind die wesentlichen Teile der Richtlinie.Ich habe einige zusätzliche Funktionen entfernt, die in der Vollversion enthalten sind.
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);
})
}
}
};
});