改变 Angular 和浏览器选择做事的顺序

Posted 2023-03-14

【中文标题】改变 Angular 和浏览器选择做事的顺序

【英文标题】：changing the order that angular and the browser choose to do things

【发布时间】：2014-02-03 21:00:41

【问题描述】：

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

用户点击一个链接，laravel 将用户路由到 /trainers/all。 trainers/all 包含 html，其中包含 html，其中包含 trainersController 和 ratingsCtrl。 trainerscontroller 向服务器发出请求以获取 trainers json 对象。 ng-repeat 循环遍历这个对象并显示每个训练者的信息，包括图像和他们的评分。

ratingsCtrl 然后使用 angular.ui 评分功能获取他们的评分并将其转换为星数。

问题有两个方面，浏览器在 angular 将 url slug 从 json 对象放入 img 对象之前请求图像。浏览器似乎多次尝试失败，直到 angular 完成工作。

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

这是错误

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>

【问题讨论】：

你在图片标签中使用了 ng-src 吗？

你在使用 angular.js 的服务器端路由吗？为什么不使用客户端路由（ngRoute / ui-router）？

@gruff 非常感谢您解决了图像问题

我认为你失去了客户端和服务器端分离的整个想法。现在，您的 angular.js 应用程序与 laravel 完全结合。这对开发不利，对性能也不利。角度方式是使用 RESTFul API，而不是 jquery 或主干。学习 angular.js 路由非常简单。不要掉进那个陷阱！

是 ng-bind 指令的快捷方式，无需创建元素即可使用。由于视图是插值的，当你使用 时你可能会得到一个 fouc，但当你使用 ng-bind 时你不会（因为它是一个属性）。

【参考方案1】：

呃，将 value="%% trainer.rating %% 更改为 value="trainer.rating" 让它像魅力一样工作