Javascript 自定义角度指令、控制台日志、DOM更新、屏幕不显示

我已经和AngularJS一起工作了大约6个月了。我对它非常满意，但就像每个框架一样，都有一些问题。我的是屏幕更新。对这个问题进行分级；我已经完成了所有的基础，$apply，$apply包装在$timeout中，等等。即使转换，也不会改变行为

我一直在使用引导CSS类和AngularJS作为我的应用程序框架创建一个进度条

我知道，Angular Bootstrap ui.Bootstrap已经做到了这一点，但它也表现出类似的行为，所以我想我应该自己去探索这个问题

以下是代码的$timeout版本：

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

问题: 虽然我可以在调试器Chrome中看到进度更新；我看到DOM正在被Chrome调试器再次更新，我可以设置断点或输出到控制台，并查看预期的进度。但是，在我调整显示器的大小之前，屏幕根本不会更新。然后，文本消息会不断更新，但CSS更改不会反映出来，直到我一次又一次地调整显示的大小

这对我来说似乎真的很奇怪，有没有其他人经历过这种行为，有没有解决方案，或者看到我的代码中有缺陷？

UPDATE 所以，在创建一个Plunker与这个线程共享时，我发现这个问题并不存在于开发环境之外。当我看到这一点时，我意识到这一定与我在Chrome浏览器中使用Bootstrap和AngularJS时遇到的另一个问题有关。为了简洁起见，这里有一个指向Git上该线程的链接

缺点是，Chrome有一个bug，在某些非常特定的条件下动态更新CSS。一旦我从等式中去掉了正常的开发环境，一切都很好

我猜这是相反的，它在我的机器难题上起作用

对于那些需要这种进度控制的人，这里是我的代码

---

我们能不能找一把小提琴/弹琴来说明这个问题？让我来整理一下。这是一个更大项目的片段。但是，老实说，这就是代码的全部内容。在没有深入检查代码的情况下，我有几次遇到了相同的问题，主要问题是jQuery比Angular慢，这导致了DOM操作方面的一些问题。@DonJuwe我在我的示例中没有使用jQuery，只是使用AngularJS。我在实际应用程序中使用jQuery，因为它还包括剑道UI。然而，我得到了同样的结果。今天早上我将发布一个JSBIN。默认情况下，AngularJS中还包括一个轻型版本的jQuery。

<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>