Я работаю с AngularJS около 6 месяцев. Я очень доволен этим, но, как и в каждой структуре, есть некоторые «gotchas». Mine - обновление экрана. Установить уровень этого вопроса; Я был, хотя все основы, $ apply, $ apply завернуты в $ timeout и т. Д. Даже «переключение» ничего не меняет поведения.Пользовательская угловая директива, консольные журналы, обновления DOM, экран не
Я создаю «индикатор выполнения» с использованием классов CSS Bootstrap и AngularJS в качестве рамки приложения.
Я знаю, радиально-Bootstrap (ui.bootstrap) уже делает это, но он демонстрировал подобное поведение, поэтому я, хотя я бы исследовать проблему сам.)
Вот $ тайм-аут версии кода:
(function(angular, undefined){
function progressTracker(){
this.message = "Loading";
this.current = 0;
this.percent = 0;
this.max = 100;
}
progressTracker.prototype.update = function (msg, max){
if(this.current === 0 && !!max){
this.max = max;
}
this.current++;
this.percent = Math.ceil((this.current/this.max) * 100);
this.message = (msg || "") + " (" + this.percent + "%)";
};
angular.module("myMod",[])
.directive("noProgressbar", ['$timeout', function($timeout){
var directive = {
restrict: "A",
link: function(scope, el, attr, ctrl){
function update(){
var p = el.children();
p.css("width", this.percent + "%");
p.attr("aria-valuenow", this.percent);
p.text(this.message);
}
scope[attr.noProgressbar] = new progressTracker();
el.addClass("progress");
el.append('<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"/>');
scope.$watch(attr.noProgressbar + ".percent", function(newData, oldData, scope){
if(newData){
$timeout(function(){scope.$root.$apply(update.bind(this))}.bind(this),10);
}
}.bind(scope[attr.noProgressbar]))
}
}
return directive;
}])
})(angular);
Вот HTML; пользовательский атрибут no-progressbar - это моя директива Angular. testProgress - это имя свойства, в котором я храню свой пользовательский объект отслеживания прогресса. Обратите внимание, что этот фрагмент был захвачен после того, как тест прошел. Стиль CSS «ширина» изменяется во много раз во время теста.
<div no-progressbar="testProgress" class="progress">
<div class="progress-bar"
role="progressbar"
aria-valuenow="100"
aria-valuemin="0"
aria-valuemax="100" style="width: 100%;">(100%)</div>
</div>
ПРОБЛЕМА:
В то время как я могу видеть обновление прогресса, происходящее в отладчике (Chrome); Я вижу, что DOM обновляется (снова отладчик Chrome), я могу установить точки останова или вывести на консоль и увидеть ожидаемый прогресс. Однако экран не обновляется, пока я не изменю размер дисплея. Затем текстовое сообщение обновляется непрерывно, но изменения CSS не отражаются до тех пор, пока я не изменю размер дисплея снова и снова.
Это кажется мне очень причудливым, кто-нибудь еще испытал это поведение, имел решение или видел недостаток в моем коде?
Можем ли мы получить скрипку/plunker иллюстрирующую проблему? –
Позвольте мне получить это вместе. Это был фрагмент из гораздо более масштабного проекта. Однако, честно говоря, это все, что есть в коде. –
Без глубокой проверки кода у меня была одна и та же проблема несколько раз, и основная проблема заключалась в том, что jQuery был медленнее, чем Angular, что вызвало некоторые проблемы с манипуляциями DOM. – DonJuwe