角函数被垃圾邮件负载

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> 

当我加载该页面functiongetRandomPerson被炒鱿鱼了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所以在准备好被使用之前不会被编译。