ng-bind-html直到單擊錨標記或ng-click才會顯示

Question

我有一種計算用戶評分平均值並將其作為視覺表示輸出給用戶的小方法。

我rateDisplay是，直到我單擊錨點標簽或執行ng-click時才顯示方法的rating和rateDisplay的結果。 我不知道為什么，因為方法和任何錨標記/ ng-clicks都是完全獨立的。 我嘗試記錄日志以確保它在我想要的時候可以執行。 以前，當我使用車把時，使用三括號轉義來顯示視覺表示時沒有任何問題。 但是自從遷移到Angular以來，我遇到了問題。 我已經將ngSanitize包含為依賴項。

quickblox.js

    listRatings: function(names, businesses) {
            var data = { _parent_id: names };

            QB.data.list("Comments", data, function(err, result) {

                if (err) {
                    // console.log("There was an error: " + err);
                } else {
                    console.log('ok we start nao');    // confirm we execute when we need to
                    var comps = {};

                    for (var i=0, len=result.items.length; i<len; i++) {
                        if (!comps[result.items[i]._parent_id]) {
                            comps[result.items[i]._parent_id] = [];
                        }
                        comps[result.items[i]._parent_id].push(result.items[i]);
                    }

                    for (var name in names) {
                        if (!(names[name] in comps)) {
                            for (var business in businesses) {
                                if (businesses[business].id == names[name]) {
                                    businesses[business].rating = '';
                                    businesses[business].rateDisplay = '  No comments yet, be the first!'.substr(1);
                                }
                            }
                        } else {
                            var sum = 0;

                            for (var j=0, len=comps[names[name]].length; j<len; j++) {
                                sum += parseInt(comps[names[name]][j].rating);
                            }

                            var avg = sum/comps[names[name]].length;

                            var avgFinal = 0;

                            if (avg.toFixed(1) % 1 === 0) {
                                avgFinal = avg + '/5';
                            } else if (avg.toFixed(1) % 1 !== 0) {
                                avgFinal = avg.toFixed(1) + '/5';
                            }

                            var needsHalf = (avg.toFixed(1) % 1);

                            var fullRating = '';

                            for (var k=0; k<5; k++) {
                                if (k < Math.floor(avg)) {
                                    fullRating += '<span class="icon-circle"></span>';
                                }
                                else if (needsHalf) {
                                    fullRating += '<span class="icon-half"></span>';
                                    needsHalf = false;
                                }
                                else {
                                    fullRating += '<span class="icon-none"></span>';
                                }
                            }

                            for (var business in businesses) {
                                if (businesses[business].id === names[name]) {
                                    businesses[business].rating = avgFinal;
                                    businesses[business].rateDisplay = fullRating;
                                }
                            }
                        }
                    }
                }
            });
        }

results.js

    $scope.businesses = [];
    $scope.results = [];       // didn't show how I populate this, not necessary 
    var names = [];

    // grab data to be applied to $scope.businesses
    getData.getBusinesses()
        .then(function(data) {

            var tempBusinesses = data,
                tempConditionData;

            for (var business in tempBusinesses) {

                tempConditionData = tempBusinesses[business].conditionData;

                for (var condition in tempConditionData) {
                    if (tempConditionData[condition].id === $scope.results.id && tempConditionData[condition].published === true) {
                        names.push(tempBusinesses[business].id);
                        $scope.businesses.push(tempBusinesses[business]);
                    }   
                }
            }
        })
        .then(function() {
            quickblox.listRatings(names, $scope.businesses);
        })
        .then(function() {
            $scope.dataLoaded = true;
        }, 
        function(err) {
            $log.log('something went wrong: ' + err);
        });

最后，

results.html

<tr ng-repeat="business in businesses | orderBy:sortBy:reverse">
    <td class="4u provider-info">
        {{business.name}} 
        <br> 
        <span ng-bind-html="business.rateDisplay"></span> <small>{{business.rating}}</small> 
    </td>
</tr>

我還多次運行了JSHint，但沒有出現任何錯誤。 有什么想法嗎？

編輯

根據要求，這是我的getBusinesses()代碼

appData.factory('getData', ['$q', '$http', function($q, $http) {
    'use strict';

    var baseURL = 'http://someapiurl.com/';

    return { 
        // ...
        getBusinesses:function() {
            return $http.get(baseURL + 'businesses')
                .then(function(res) {
                    if (typeof res.data === 'object') {
                        return res.data;
                    } else {
                        return $q.reject(res.data);
                    }
                },
                function(err) {
                    return $q.reject(err.data);
                });
        }
    };
});

Answer 1

在不完全了解幕后情況的情況下，我將猜測您在“ Angular-world”之外發生了異步操作。 換句話說，Angular不知道發生了對作用域暴露的變量的更改，並且沒有觸發摘要循環，直到您用ng-click一個按鈕（例如，觸發摘要）。

可能發生的地方在這里：

QB.data.list("Comments", data, function(err, result) {

});

這是異步操作，對嗎？ 在完成時調用處理程序函數嗎？

如果您為該范圍變量分配任何內容，除非調用$scope.$apply ，否則它對Angular不可見。 假設您將當前處理程序函數分解為yourCurrentHandler ：

function yourCurrentHandler(err, result){
   // whatever you do right now
   // ...
}

QB.data.list("Comments", data, function(err, result) {
   $scope.$apply(function(){ 
      yourCurrentHandler(err, result); 
   }); 
});

舉個例子