javascript - Angular 函数在加载时被垃圾邮件

Question

我有以下 Controller :

    app.controller('SignUpController', ['$http','$sessionStorage','api', '$scope','$state', '$log', 'Session','clientSocket', function ($http, $sessionStorage, api, $scope,$state, $log, Session, clientSocket) {
    var signupCtrl = this;


    signupCtrl.getRandomPerson = function () {
        var isGuy = Math.floor((Math.random() * 2));
        if(isGuy == 1 || isGuy == 0){
            var picture = Math.floor((Math.random()*9));
            return 'img/guys/guy-'+picture+'.jpg';
        }else{
            var picture = Math.floor((Math.random()*10));
            return 'img/guys/woman-'+picture+'.jpg';
        }
    }

}]);

使用以下 html:

<div class="container w-xxl w-auto-xs" ng-controller="SignUpController as signUpCtrl" ng-init="app.settings.container = false;">
<div class="m-b-lg">
    <div class="bg-white p-md">
        <div class="block m-t text-center m-b-xl">
            <img src="{{signUpCtrl.getRandomPerson()}}" alt="Company Logo" class="img-circle" style="display: inline-block">
        </div>
        <form name="form" class="form-validation">
            <div class="list-group list-group-sm">
                <div class="list-group-item">
                    <input placeholder="Name" class="form-control no-border" ng-model="user.name" required>
                </div>
                <div class="list-group-item">
                    <input type="email" placeholder="Email" class="form-control no-border" ng-model="user.email" required>
                </div>
                <div class="list-group-item">
                    <input type="password" placeholder="Password" class="form-control no-border" ng-model="user.password" required>
                </div>
            </div>
            <div class="checkbox m-b-md m-t-none">
                <label class="i-checks">
                    <input type="checkbox" ng-model="agree" required><i></i> Agree the <a href>terms and policy</a>
                </label>
            </div>
            <button type="submit" class="btn btn-lg btn-primary btn-block" ng-click="signup()" ng-disabled='form.$invalid'>Sign up</button>
            <div class="line line-dashed"></div>
            <p class="text-center"><small>Already have an account?</small></p>
            <a ui-sref="access.signin" class="btn btn-lg btn-default btn-block">Sign in</a>
        </form>

    </div>
</div>

<div class="text-center" ng-include="'tpl/blocks/page_footer.html'">
    {% include 'blocks/page_footer.html' %}
</div>

当我加载此页面时，函数 getRandomPerson 被触发了 10 多次。有时，angular 会抛出以下异常:

    Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"fn: expressionInputWatch","newVal":"img/guys/guy-2.jpg","oldVal":"img/guys/guy-1.jpg"}],[{"msg":"fn: expressionInputWatch","newVal":"img/guys/guy-6.jpg","oldVal":"img/guys/guy-2.jpg"}],[{"msg":"fn: expressionInputWatch","newVal":"img/guys/guy-1.jpg","oldVal":"img/guys/guy-6.jpg"}],[{"msg":"fn: expressionInputWatch","newVal":"img/guys/guy-4.jpg","oldVal":"img/guys/guy-1.jpg"}],[{"msg":"fn: expressionInputWatch","newVal":"img/guys/guy-8.jpg","oldVal":"img/guys/guy-4.jpg"}]]
http://errors.angularjs.org/1.3.14/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22m…guys%2Fguy-8.jpg%22%2C%22oldVal%22%3A%22img%2Fguys%2Fguy-4.jpg%22%7D%5D%5D
    at REGEX_STRING_REGEXP (angular.js:63)
    at Scope.$get.Scope.$digest (angular.js:14281)
    at Scope.$get.Scope.$apply (angular.js:14506)
    at done (angular.js:9659)
    at completeRequest (angular.js:9849)
    at XMLHttpRequest.requestLoaded (angular.js:9790)

谁能告诉我这是怎么回事？

Answer 1

问题是许多摘要可能会在页面内的特定范围内运行......即使只是渲染一次

因为每个摘要都从您的函数中看到一个新值，所以它会强制另一个摘要。因此你正在创建一个无限循环

只需分配一个作用域变量 randomImage 并获取函数返回的值，而不是将函数放在 html 中

正如所指出的那样，使用 ng-src 以便最终的 src 在编译后设置为正确的值。否则你会向服务器发出奇怪的无效路径请求

 // will only run once when controller initializes
 signupCtrl.randomImage = getRandomPerson();  

// no need to be on scope since using it privately
var getRandomPerson = function() {
    var isGuy = Math.floor((Math.random() * 2));
    if(isGuy == 1 || isGuy == 0){
        var picture = Math.floor((Math.random()*9));
        return 'img/guys/guy-'+picture+'.jpg';
    }else{
        var picture = Math.floor((Math.random()*10));
        return 'img/guys/woman-'+picture+'.jpg';
    }
}

HTML

<!-- No src so browser won't make request to invalid path --> 
<img ng-src="{{signUpCtrl.randomImage }}">