Question

我有一个计算用户评级平均值的方法，并将其作为可视化表示输出给用户。

我遇到的问题是，在我点击锚标记或执行ng之前，rating和rateDisplay的方法结果都不会显示-Click。我无法弄清楚原因，因为方法和任何锚标记/ 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

如果不完全了解幕后发生的事情，我会猜测你在＆＃34; Angular-world＆＃34;之外发生了异步操作。换句话说，Angular不会意识到已经发生了对范围暴露变量的更改并且没有触发摘要周期，直到您单击具有ng-click的按钮，例如触发摘要。 / p>

可能出现的地方是：

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

});

这是异步操作，对吗？在完成时调用处理函数？

如果在那里为scope变量赋值，除非你调用$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); 
   }); 
});

plunker带有说明性示例

ng-bind-html在点击锚标记或ng-click之前不显示

1 个答案: