I've been grappling with this issue for quite some time now and I can't seem to figure out why the angular template is failing to refresh when the scope changes. Here's a link to my JSFiddle - http://jsfiddle.net/HB7LU/2591/ (please note that it's not functioning properly due to an ajax request for a JSON file (http://pastebin.com/0nSaM6pB). Here's a simplified version of the code:
function MyCtrl($scope, $location, $routeParams) {
$scope.loadLinks = function() {
$scope.elementData = SOME_REQUEST_RESPONSE;
$scope.parseLinks();
}
if(typeof $scope.elementData == "undefined") $scope.loadLinks();
$scope.parseLinks = function() {
if(typeof $scope.elementData == "undefined") return;
$scope.elements = [];
$.each($scope.elementData, function(index, value) {
// SOME PARSING
$scope.elements.push(SOME_PARSED_OBJECT);
});
}
$scope.parseLinks();
}
This code works as follows:
- I fetch the JSON file and store it in elementData
- I then execute parseLinks(), iterate over it, and make necessary changes
- The modified data is stored in elements
- In the template, I use ng-repeat to loop through the parsed object
The issue arises when the page transitions in my single-page application. The parseLinks() function runs correctly each time, updating the elements, but the template fails to re-render. I attempted to use $apply but encountered a strange $digest already in progress error, which makes me question whether the template is actually being refreshed.
The goal is to dynamically show/hide different menu links on various sub-pages. The initial display works fine, as does refreshing the page on a sub-page.
Thank you for any assistance you can provide!