Question

我在角度和浏览器中发生事情的顺序存在两个问题。我正在使用laravel作为后端，以下情况正在发生。

用户点击链接并将用户路由到/ trainers / all。 trainers / all包括html，其中包括html，其中包括trainersController和ratingsCtrl。 trainerscontroller为服务器的json对象发出get请求。 ng-repeat循环遍历此对象并显示每个培训师的信息，包括图像及其评级。

ratingCtrl然后获得他们的评级并使用angular.ui评级功能将其变成许多星星。

问题是双重的，浏览器在角度已经将来自json对象的url slug放入img对象之前请求图像。浏览器似乎多次尝试失败，直到angular完成其工作。

第二个是angular尝试在trainersController将它放入dom元素之前获取评级的值。第二个错误会停止ng重复，因此只显示一个培训师，如果我删除了ratingctrl，那么除了img问题外，ngrepeat完成没有任何问题。如果我对评级值进行硬编码，它也会起作用。

这是错误

TypeError: undefined is not a function
    at Ia.% (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:145:85)
    at Ia.% (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:145:85)
    at t.constant (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:157:136)
    at Ia.% (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:145:85)
    at t.constant (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:157:136)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:48:165
    at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:7:380)
    at E (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:47:289)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:56:32
    at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js:42:399)

这是相关代码

app.js

var trainercompareapp = angular.module("trainercompare", ['ui.bootstrap']);

trainercompareapp.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('%%');
  $interpolateProvider.endSymbol('%%');
});

function trainersController($scope, $http) {
     $http.get('/trainers').success(function(trainers) {
        $scope.trainers = trainers;
     });
}

var RatingCtrl = function ($scope) {
  $scope.rate = 7;
  $scope.max = 10;
  $scope.isReadonly = false;

  $scope.hoveringOver = function(value) {
    $scope.overStar = value;
    $scope.percent = 100 * (value / $scope.max);
  };

  $scope.ratingStates = [
    {stateOn: 'glyphicon-ok-sign', stateOff: 'glyphicon-ok-circle'},
    {stateOn: 'glyphicon-star', stateOff: 'glyphicon-star-empty'},
    {stateOn: 'glyphicon-heart', stateOff: 'glyphicon-ban-circle'},
    {stateOn: 'glyphicon-heart'},
    {stateOff: 'glyphicon-off'}
  ];
};

HTML 的

<div class="col-xs-12 container" ng-controller="trainersController">
        <div ng-repeat="trainer in trainers">
            <div class="col-xs-6">

                <div class="row">

                    <img class="col-xs-6"src="%% trainer.user.images[0]['s3Url'] %%">

                </div>

                <div class="row">

                    <div class="col-xs-7" ng-controller="RatingCtrl">

                        <rating
                            class="rating" 
                            value="%% trainer.rating %%" 
                            max="max" 
                            readonly="true" 
                            on-hover="hoverOver(value)" 
                            on-leave="overStar = null">
                        </rating>

                    </div>

                    <div class="col-xs-4">
                        <a href="/trainers/%% trainer.id %%">View Profile</a>
                    </div>

                </div>
                    <hr>
            </div>
        </div>
    </div>

Answer 1

呃，改变价值=“%% trainer.rating %% to just value =”trainer.rating“让它像魅力一样工作

更改角度和浏览器选择执行操作的顺序

1 个答案: