0

I have tried to research this issue and have had no luck. My ng-repeat doesn't display dynamic content from the controller on the first try. I was told to use a .digest or apply to get angular to hit my page again but I am not quite clear how to implement. From the examples I saw online this should work

var shopItems = angular.module('shopItems', []);
var trophyEarns = angular.module('trophyEarns', []);
var app = angular.module('app', ['shopItems', 'trophyEarns']);

shopItems.controller('shopItemController', function ($scope) {
    $scope.shopItems = [{
            //id: 01,
            name: 'One',
            //img: '',
            price: '$3.99',
            altprice: '1 mile',
            desc: 'This is a fake description.',
            prog: '50%'
        },{
            //id: 02,
            name: 'Two',
            //img: '',
            price: '$3.99',
            altprice: '1 mile',
            desc: 'This is a fake description.',
            prog: '50%'
        }];
        $scope.$apply();
});

trophyEarns.controller('trophyEarnsController', function ($scope) {
    $scope.trophyEarns = [{
            //id: 01,
            name: 'One',
            //img: '',
            price: '$3.99',
            altprice: '1 mile',
            desc: 'This is a fake description.',
            prog: '50%'
        },{
            //id: 02,
            name: 'Two',
            //img: '',
            price: '$3.99',
            altprice: '1 mile',
            desc: 'This is a fake description.',
            prog: '50%'
        }];
        $scope.$apply();
});

Here is a snippet of the html and controller

<div ng-app="app">
    <div ng-controller="shopItemController">
        <div class="itm" ng-repeat="shopItem in shopItems">
            <div class="imag"></div>
            <h2>{{ shopItem.name }}</h2>
            <div class="hff">Earn it: {{ shopItem.altprice }}</div>
            <div class="hf">Buy it: {{ shopItem.price }}</div>
            <div class="desc"><div>{{ shopItem.desc }}</div></div>
            <div class="prog"><div>{{ shopItem.progress }}</div></div>
        </div>
    </div>
</div>

But this does nothing and no errors pop up. I am still forced to reload every time I leave and go back to the pages with the controllers to see the dynamic content. Am I using this correctly? Is digest better?

riotgear
  • 451
  • 1
  • 5
  • 19
  • You are missing ***the most important piece of the problem*** here. You aren't showing the HTML that is displaying the `ng-repeat` which you state isn't rendering this data. – Claies Oct 24 '15 at 01:28
  • I added it. Sorry about that. – riotgear Oct 24 '15 at 01:30
  • This is working fine in a [plunker](http://plnkr.co/edit/IJzScSDzxvPNllaDTgOv?p=preview) **without `$scope.apply()`**. something you aren't showing here is at fault, but this is not a case where you would need `$scope.apply()` or `$scope.digest()`. – Claies Oct 24 '15 at 01:34
  • Same [thing works here](http://plnkr.co/edit/ARQgCURJklF2uAdHUZsQ?p=preview) Perhaps it's a routing issue. Show routung code – charlietfl Oct 24 '15 at 01:36
  • the way you worded your question makes me think that you aren't *actually* dealing with data defined in your controller, but some data defined somewhere else. – Claies Oct 24 '15 at 01:36
  • I am not using a router. :( I am just trying to dip my toe in and get pieces to work before I use angular to it's full potential. – riotgear Oct 24 '15 at 01:39
  • something is not right with the way that page is transitioned to, angular isn't being loaded when the page is first accessed. (you should never see `{{ }}` expressions if angular is loaded). you might notice, the use of `$scope.apply()` is actually throwing an error there when the page is reloaded *with* angular available. – Claies Oct 24 '15 at 01:41
  • I kind of understand what you are saying. Could it be an issue with the jquery mobile ajax and angular not playing well together? – riotgear Oct 24 '15 at 01:43
  • something is definitely wrong with the way you are loading your scripts/templates; beyond that, I wouldn't ever recommend using angular 1.1.x, as the entire 1.1.x line was considered experimental, and is depreciated now. – Claies Oct 24 '15 at 01:43
  • old version of angular and you have it mixed with another page managing framework jQuery mobile. You probably need a bridge between them – charlietfl Oct 24 '15 at 01:44
  • well, you can't use JQuery to fetch HTML that has angular expressions in it and just append them to the DOM and expect angular to know they exist; they have to be compiled into the DOM to be attached to the appropriate controller. – Claies Oct 24 '15 at 01:44
  • I updated the angular and it's still broken. I will maybe try and strip out the jquery mobile and try just html 5 and angular...would that be my best bet? – riotgear Oct 24 '15 at 01:59

0 Answers0