Html mdTab中的DOM元素未使用angular.css方法更新

我在我的表格里有进度条，在那个里我显示了在这个项目上花了多少小时。当我点击某个选项卡时，currentTab方法被触发以从数据库获取数据，在我的承诺得到解决后，我的TimeService函数也被触发以计算进度条的小时数，但当达到

angular.css（）

时，它根本不会更新我的进度条，我不知道为什么，因为它肯定是100%工作代码。mdTabs中是否有一些功能可以防止这种情况

在下面的HTML代码中，我删除了大量内容以使其更具可读性

<md-tab label="Testing" md-on-select="currentTab('Testing')">
<md-content class="md-padding">
    <table id="projects-active" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Description</th>
                <th>Estimated time</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="project in projects.Data">
                <td>{{project.Id}}</td>
                <td>{{project.Name}}</td>
                <td>{{project.Description}}</td>
                <td>
                    <div class="progress-group">
                        <div class="progress sm">
                            <div class="progress-bar progress-bar-success progress-bar-striped" id="progress-bar-pId-{{project.Id}}">
                            </div>
                        </div>
                    </div>
                </td>
                <td>{{project.Status}}</td>
            </tr>

        </tbody>
    </table>
    <div class="box-footer clearfix">
        <ul uib-pagination total-items="totalItems"
            items-per-page="maxSize"
            ng-model="currentPage"
            max-size="maxSize"
            class="pagination-sm"
            boundary-links="true"
            num-pages="pages"
            ng-change="setPage(currentPage, 'Testing')"></ul>
    </div>
</md-content>

这是我的控制器函数，在这里我将数据提取到我的数据表中

var MAX_SIZE_PER_PAGE = 5;

$scope.currentPage = 1;
$scope.maxSize = MAX_SIZE_PER_PAGE;
$scope.pages = 0;
$scope.totalItems = 0;

$scope.setPage = function (pageNo, status) {
$scope.currentPage = pageNo;
$scope.projects = ProjectService.queryPaged({ pageSize: $scope.maxSize, pageNumber: $scope.currentPage, status: status });

    $scope.projects.$promise.then(function (data) {
        setTimeout(function () {
            TimeService.projectProgressArray($scope.projects);
        }, 0);
    });
};
$scope.currentTab = function (status) {

    $scope.projects = ProjectService.queryPaged({ pageSize: $scope.maxSize, pageNumber: 1, status: status });
    $scope.projects.$promise.then(function (data) {
        $scope.totalItems = data.TotalCount;

        setTimeout(function () {
            TimeService.projectProgressArray($scope.projects);
        }, 0);
    });
}

更新：我添加了一个图像，在该图像中，我将进度条复制到

md选项卡

之外，以显示其在

md选项卡

之外的工作，但不在其内部

---

因此，经过一段时间的研究，我发现我无法使用

Angular.element（）.css（）

方法在

Angular material

中使用

css

进行操作。我必须编辑我的TimeService方法，在该方法中，我创建了一个数组，其中填充了每个项目的单个进度条的信息，并将其发送回我的控制器，然后使用

ng样式

在ng材质DOM中使用我的css进行操作

 projectProgressArray: function (array) {
            var progressBarArray = [];

            var items = array.Data;

            angular.forEach(items, function (key, value) {
                var progressBar = {
                    projectId: null,
                    percentage: null,
                    barClass: null
                }

                var id = key.Id;
                var maxTime = key.EstimatedTime;
                var currentTime = key.TimeSpend;
                var percentageComplete = Math.round(((currentTime / maxTime) * PERCENTAGE) * 100) / 100;

                progressBar.projectId = id;
                progressBar.percentage = percentageComplete + "%";

                if (!("#progress-bar-pId-" + id).length == 0) {
                    if (percentageComplete > 100) {
                        progressBar.barClass = "progress-bar-danger";
                    }
                    else {
                        progressBar.barClass = "progress-bar-success";
                    }
                }
                progressBarArray.push(progressBar);
            });
            return progressBarArray;

修改的HTML绑定

<div class="progress-group">
<div class="progress sm" ng-repeat="item in progressBars" ng-hide="item.projectId != project.Id">
    <div ng-class="{'progress-bar-success': item.barClass == 'progress-bar-success',
                                                            'progress-bar-danger': item.barClass == 'progress-bar-danger' }"
         class="progress-bar progress-bar-success progress-bar-striped" id="progress-bar-pId-{{project.Id}}"
         ng-style="{'width':item.percentage}">
    </div>
</div>

<div class="progress-group">
<div class="progress sm" ng-repeat="item in progressBars" ng-hide="item.projectId != project.Id">
    <div ng-class="{'progress-bar-success': item.barClass == 'progress-bar-success',
                                                            'progress-bar-danger': item.barClass == 'progress-bar-danger' }"
         class="progress-bar progress-bar-success progress-bar-striped" id="progress-bar-pId-{{project.Id}}"
         ng-style="{'width':item.percentage}">
    </div>
</div>