Question

我有以下控制器：

    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>

当我加载此页面时，function getRandomPerson被解雇了10次。有时候，角度会引发以下行为：

    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

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

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

只需指定范围变量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 }}">

Answer 2

你有一个src绑定到你的函数，如果你打算这样做，你应该使用ng-src，这样它就可以在它准备好被消费之前被编译。

角度函数在加载时发送垃圾邮件

2 个答案: