AngularJS [$rootScope:infdig] error with Random Number function
0
I am getting a [$rootScope:infdig] error but my code actually works. What I am trying to do is load an image or a random placeholder image if one does not exist.
<div ng-repeat="v in tiles track by $index" id="text-{{v.ID}}" class="lity-hide row-fluid lityBox">
<div class="span3">
<img ng-src="{{v.Image !== undefined ? v.Image.split(',')[0] : getPlaceholderImg() }}">
<h4 class="centerMe">{{v.Title}}</h4>
</div>
</div>
Here is the function in $scope:
$scope.getPlaceholderImg = function() {
$scope.placeholderImg = "http://myurl.com/defaultImg" + Math.floor((Math.random()*5)+1) + ".jpg";
return $scope.placeholderImg;
}
angularjs
asked Nov 14 '18 at 2:57
Nate23VTNate23VT
11817
add a comment |
0
I am getting a [$rootScope:infdig] error but my code actually works. What I am trying to do is load an image or a random placeholder image if one does not exist.
<div ng-repeat="v in tiles track by $index" id="text-{{v.ID}}" class="lity-hide row-fluid lityBox">
<div class="span3">
<img ng-src="{{v.Image !== undefined ? v.Image.split(',')[0] : getPlaceholderImg() }}">
<h4 class="centerMe">{{v.Title}}</h4>
</div>
</div>
Here is the function in $scope:
$scope.getPlaceholderImg = function() {
$scope.placeholderImg = "http://myurl.com/defaultImg" + Math.floor((Math.random()*5)+1) + ".jpg";
return $scope.placeholderImg;
}
angularjs
asked Nov 14 '18 at 2:57
Nate23VTNate23VT
11817
Fairly certain the problem lies with the conditional interpolation expression bound tong-src. AngularJS tries to determine when models have stabilised, but if the references keep changing (as in your case possibly), it results in an infinite digest (i.e. cannot stabilise). So, rather than invokegetPlaceholderImg(), try have something else set$scope.placeholderImgbeforehand and use the latter as the second part of the ternary instead.
– miqh
Nov 14 '18 at 3:34
See AngularJS Error Reference - $rootScope:infdig Infinite $digest Loop.
– georgeawg
Nov 14 '18 at 6:17
add a comment |
0
0
0
I am getting a [$rootScope:infdig] error but my code actually works. What I am trying to do is load an image or a random placeholder image if one does not exist.
<div ng-repeat="v in tiles track by $index" id="text-{{v.ID}}" class="lity-hide row-fluid lityBox">
<div class="span3">
<img ng-src="{{v.Image !== undefined ? v.Image.split(',')[0] : getPlaceholderImg() }}">
<h4 class="centerMe">{{v.Title}}</h4>
</div>
</div>
Here is the function in $scope:
$scope.getPlaceholderImg = function() {
$scope.placeholderImg = "http://myurl.com/defaultImg" + Math.floor((Math.random()*5)+1) + ".jpg";
return $scope.placeholderImg;
}
angularjs
asked Nov 14 '18 at 2:57
Nate23VTNate23VT
11817
I am getting a [$rootScope:infdig] error but my code actually works. What I am trying to do is load an image or a random placeholder image if one does not exist.
<div ng-repeat="v in tiles track by $index" id="text-{{v.ID}}" class="lity-hide row-fluid lityBox">
<div class="span3">
<img ng-src="{{v.Image !== undefined ? v.Image.split(',')[0] : getPlaceholderImg() }}">
<h4 class="centerMe">{{v.Title}}</h4>
</div>
</div>
Here is the function in $scope:
$scope.getPlaceholderImg = function() {
$scope.placeholderImg = "http://myurl.com/defaultImg" + Math.floor((Math.random()*5)+1) + ".jpg";
return $scope.placeholderImg;
}
angularjs
angularjs
asked Nov 14 '18 at 2:57
Nate23VTNate23VT
11817
asked Nov 14 '18 at 2:57
Nate23VTNate23VT
11817
asked Nov 14 '18 at 2:57
Nate23VTNate23VT
11817
asked Nov 14 '18 at 2:57
Nate23VTNate23VT
11817
asked Nov 14 '18 at 2:57
Nate23VTNate23VT
11817
11817
Fairly certain the problem lies with the conditional interpolation expression bound tong-src. AngularJS tries to determine when models have stabilised, but if the references keep changing (as in your case possibly), it results in an infinite digest (i.e. cannot stabilise). So, rather than invokegetPlaceholderImg(), try have something else set$scope.placeholderImgbeforehand and use the latter as the second part of the ternary instead.
– miqh
Nov 14 '18 at 3:34
See AngularJS Error Reference - $rootScope:infdig Infinite $digest Loop.
– georgeawg
Nov 14 '18 at 6:17
add a comment |
Fairly certain the problem lies with the conditional interpolation expression bound tong-src. AngularJS tries to determine when models have stabilised, but if the references keep changing (as in your case possibly), it results in an infinite digest (i.e. cannot stabilise). So, rather than invokegetPlaceholderImg(), try have something else set$scope.placeholderImgbeforehand and use the latter as the second part of the ternary instead.
– miqh
Nov 14 '18 at 3:34
See AngularJS Error Reference - $rootScope:infdig Infinite $digest Loop.
– georgeawg
Nov 14 '18 at 6:17
Fairly certain the problem lies with the conditional interpolation expression bound to
ng-src. AngularJS tries to determine when models have stabilised, but if the references keep changing (as in your case possibly), it results in an infinite digest (i.e. cannot stabilise). So, rather than invoke getPlaceholderImg(), try have something else set $scope.placeholderImg beforehand and use the latter as the second part of the ternary instead.– miqh
Nov 14 '18 at 3:34
Fairly certain the problem lies with the conditional interpolation expression bound to
ng-src. AngularJS tries to determine when models have stabilised, but if the references keep changing (as in your case possibly), it results in an infinite digest (i.e. cannot stabilise). So, rather than invoke getPlaceholderImg(), try have something else set $scope.placeholderImg beforehand and use the latter as the second part of the ternary instead.– miqh
Nov 14 '18 at 3:34
See AngularJS Error Reference - $rootScope:infdig Infinite $digest Loop.
– georgeawg
Nov 14 '18 at 6:17
See AngularJS Error Reference - $rootScope:infdig Infinite $digest Loop.
– georgeawg
Nov 14 '18 at 6:17
add a comment |
1 Answer
1
active
oldest
votes
0
One solution is to use the one-time binding operator (::) to stabilize the expression:
<div ng-repeat="v in tiles track by $index" id="text-{{v.ID}}" class="lity-hide row-fluid lityBox">
<div class="span3">
̶<̶i̶m̶g̶ ̶n̶g̶-̶s̶r̶c̶=̶"̶{̶{̶v̶.̶I̶m̶a̶g̶e̶ ̶!̶=̶=̶ ̶u̶n̶d̶e̶f̶i̶n̶e̶d̶ ̶?̶ ̶v̶.̶I̶m̶a̶g̶e̶.̶s̶p̶l̶i̶t̶(̶'̶,̶'̶)̶[̶0̶]̶ ̶:̶ ̶g̶e̶t̶P̶l̶a̶c̶e̶h̶o̶l̶d̶e̶r̶I̶m̶g̶(̶)̶ ̶}̶}̶"̶>̶
<img ng-src="{{::v.Image !== undefined ? v.Image.split(',')[0] : getPlaceholderImg() }}">
<h4 class="centerMe">{{v.Title}}</h4>
</div>
</div>
For more information, see
- AngularJS Developer Guide - One-Time Binding
AngularJS Error Reference - $rootScope:infdig
Infinite $digest Loop.
answered Nov 14 '18 at 6:24
georgeawggeorgeawg
33k104968
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53292543%2fangularjs-rootscopeinfdig-error-with-random-number-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
One solution is to use the one-time binding operator (::) to stabilize the expression:
<div ng-repeat="v in tiles track by $index" id="text-{{v.ID}}" class="lity-hide row-fluid lityBox">
<div class="span3">
̶<̶i̶m̶g̶ ̶n̶g̶-̶s̶r̶c̶=̶"̶{̶{̶v̶.̶I̶m̶a̶g̶e̶ ̶!̶=̶=̶ ̶u̶n̶d̶e̶f̶i̶n̶e̶d̶ ̶?̶ ̶v̶.̶I̶m̶a̶g̶e̶.̶s̶p̶l̶i̶t̶(̶'̶,̶'̶)̶[̶0̶]̶ ̶:̶ ̶g̶e̶t̶P̶l̶a̶c̶e̶h̶o̶l̶d̶e̶r̶I̶m̶g̶(̶)̶ ̶}̶}̶"̶>̶
<img ng-src="{{::v.Image !== undefined ? v.Image.split(',')[0] : getPlaceholderImg() }}">
<h4 class="centerMe">{{v.Title}}</h4>
</div>
</div>
For more information, see
- AngularJS Developer Guide - One-Time Binding
AngularJS Error Reference - $rootScope:infdig
Infinite $digest Loop.
answered Nov 14 '18 at 6:24
georgeawggeorgeawg
33k104968
add a comment |
0
One solution is to use the one-time binding operator (::) to stabilize the expression:
<div ng-repeat="v in tiles track by $index" id="text-{{v.ID}}" class="lity-hide row-fluid lityBox">
<div class="span3">
̶<̶i̶m̶g̶ ̶n̶g̶-̶s̶r̶c̶=̶"̶{̶{̶v̶.̶I̶m̶a̶g̶e̶ ̶!̶=̶=̶ ̶u̶n̶d̶e̶f̶i̶n̶e̶d̶ ̶?̶ ̶v̶.̶I̶m̶a̶g̶e̶.̶s̶p̶l̶i̶t̶(̶'̶,̶'̶)̶[̶0̶]̶ ̶:̶ ̶g̶e̶t̶P̶l̶a̶c̶e̶h̶o̶l̶d̶e̶r̶I̶m̶g̶(̶)̶ ̶}̶}̶"̶>̶
<img ng-src="{{::v.Image !== undefined ? v.Image.split(',')[0] : getPlaceholderImg() }}">
<h4 class="centerMe">{{v.Title}}</h4>
</div>
</div>
For more information, see
- AngularJS Developer Guide - One-Time Binding
AngularJS Error Reference - $rootScope:infdig
Infinite $digest Loop.
answered Nov 14 '18 at 6:24
georgeawggeorgeawg
33k104968
add a comment |
0
0
0
One solution is to use the one-time binding operator (::) to stabilize the expression:
<div ng-repeat="v in tiles track by $index" id="text-{{v.ID}}" class="lity-hide row-fluid lityBox">
<div class="span3">
̶<̶i̶m̶g̶ ̶n̶g̶-̶s̶r̶c̶=̶"̶{̶{̶v̶.̶I̶m̶a̶g̶e̶ ̶!̶=̶=̶ ̶u̶n̶d̶e̶f̶i̶n̶e̶d̶ ̶?̶ ̶v̶.̶I̶m̶a̶g̶e̶.̶s̶p̶l̶i̶t̶(̶'̶,̶'̶)̶[̶0̶]̶ ̶:̶ ̶g̶e̶t̶P̶l̶a̶c̶e̶h̶o̶l̶d̶e̶r̶I̶m̶g̶(̶)̶ ̶}̶}̶"̶>̶
<img ng-src="{{::v.Image !== undefined ? v.Image.split(',')[0] : getPlaceholderImg() }}">
<h4 class="centerMe">{{v.Title}}</h4>
</div>
</div>
For more information, see
- AngularJS Developer Guide - One-Time Binding
AngularJS Error Reference - $rootScope:infdig
Infinite $digest Loop.
answered Nov 14 '18 at 6:24
georgeawggeorgeawg
33k104968
One solution is to use the one-time binding operator (::) to stabilize the expression:
<div ng-repeat="v in tiles track by $index" id="text-{{v.ID}}" class="lity-hide row-fluid lityBox">
<div class="span3">
̶<̶i̶m̶g̶ ̶n̶g̶-̶s̶r̶c̶=̶"̶{̶{̶v̶.̶I̶m̶a̶g̶e̶ ̶!̶=̶=̶ ̶u̶n̶d̶e̶f̶i̶n̶e̶d̶ ̶?̶ ̶v̶.̶I̶m̶a̶g̶e̶.̶s̶p̶l̶i̶t̶(̶'̶,̶'̶)̶[̶0̶]̶ ̶:̶ ̶g̶e̶t̶P̶l̶a̶c̶e̶h̶o̶l̶d̶e̶r̶I̶m̶g̶(̶)̶ ̶}̶}̶"̶>̶
<img ng-src="{{::v.Image !== undefined ? v.Image.split(',')[0] : getPlaceholderImg() }}">
<h4 class="centerMe">{{v.Title}}</h4>
</div>
</div>
For more information, see
- AngularJS Developer Guide - One-Time Binding
AngularJS Error Reference - $rootScope:infdig
Infinite $digest Loop.
answered Nov 14 '18 at 6:24
georgeawggeorgeawg
33k104968
answered Nov 14 '18 at 6:24
georgeawggeorgeawg
33k104968
answered Nov 14 '18 at 6:24
georgeawggeorgeawg
33k104968
answered Nov 14 '18 at 6:24
georgeawggeorgeawg
33k104968
33k104968
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53292543%2fangularjs-rootscopeinfdig-error-with-random-number-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Fairly certain the problem lies with the conditional interpolation expression bound to
ng-src. AngularJS tries to determine when models have stabilised, but if the references keep changing (as in your case possibly), it results in an infinite digest (i.e. cannot stabilise). So, rather than invokegetPlaceholderImg(), try have something else set$scope.placeholderImgbeforehand and use the latter as the second part of the ternary instead.– miqh
Nov 14 '18 at 3:34
See AngularJS Error Reference - $rootScope:infdig Infinite $digest Loop.
– georgeawg
Nov 14 '18 at 6:17