Angular $scope not showing correct data in HTML

Question

I have a cordova app in which I want to show the details of a location. For some reason when I try to display a variable in HTMl which is being successfully assigned in JS, nothing appears.

JS controller:

app.controller('placeCtrl', function($scope, LocDat){
  LocDat.async().then(function(d){
    $scope.item= places.selectedItem;  
    $scope.locs = [];
    for(var i=0; i<d.length; i++){
      if(d[i].attributes.Joint.id === places.selectedItem.id){
        getDistance(d[i]);
        $scope.locs.push(d[i]);
      }
    }

    $scope.showSite = function(){
    //var ref = navigator.app.loadUrl($scope.item.attributes.Website, '_blank');
    var ref = window.open($scope.item.attributes.Website,'_blank','location=yes');
  }

  $scope.showDetail = function(index){
    var selectedItem = d[index];
    d.selectedItem = selectedItem
    $scope.l = selectedItem;
    console.log($scope.l.attributes.City);
    $scope.ons.navigator.pushPage('location_detail.html', { title : d.selectedItem.attributes.Address });
  }
});

HTML:

<!DOCTYPE html>

<html>
    <body>
        <div ng-controller="placeCtrl">
            <ons-page class="center" ng-device-backbutton="myNavigator.popPage()">
                <ons-toolbar>
                  <div class="left"><ons-back-button ons-if-platform="ios">Back</ons-back-button></div>
                  <div id="title" class="center">{{l.attributes.City}}, {{l.attributes.State}}</div>
                  <!--<div class="left" onclick=".myNavigator.popPage()"><ons-back-button>Back</ons-back-button></div>-->
                  <!--<div class="center">Page 2</div>-->
                </ons-toolbar>
                <h2 align="center">Location Details Go Here</h2>
                <!--enter more content here-->
            </ons-page>
        </div>
    </body>
</html>

Image of the Console output:

Apparently my reputation is too low to post images... Seriously? Anyway, it displays the City name in the console successfully, but the html only shows the comma

Joshua Ohana · Accepted Answer · 2015-01-27 20:52:41Z

1

Services that make async calls, such as your LocDat, do not automagically trigger a digest event when they return. If you're writing a service it should call a $scope.$apply() chained to the end of the promise. Alternatively you can wrap any changes to $scope variables in an apply and that should get you where you need.

$scope.$apply( function() { $scope.l = selectedItem; } );

answered Jan 27, 2015 at 20:52

Joshua Ohana

6,16915 gold badges65 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

deavisdude Over a year ago

I wrapped it in an apply as you suggested, but now I'm just being told that l is undefined

Joshua Ohana Over a year ago

Can you get an example up on jsfiddle and I'll look

deavisdude Over a year ago

I don't think I can get it to work in jsfiddle, cordova apps require an emulator, plus that would require me giving up my parse ids

Mavlarn · Accepted Answer · 2015-02-09 02:43:44Z

0

In angularjs data binding, if the data type is list or object, it will pass by reference value in view.

When you do like $scope.l = selectedItem, the reference is changed, but the watched reference is previous one. So it will be always better to bind by an attribute on an object, but not the object itself. like:
<div id="title" class="center">{{obj.l.attributes.City}}, {{obj.l.attributes.State}}</div>

And update in controller with:
$scope.obj.l = selectedItem;

answered Feb 9, 2015 at 2:43

Mavlarn

3,8812 gold badges41 silver badges58 bronze badges

Comments

deavisdude · Accepted Answer · 2015-02-22 19:56:38Z

0

The issue was that the scope changed when I loaded the new page. I'm now passing the data through the parameters of onsenui's pushpage function and assigning them to the scope variables in a separate controller.

answered Feb 22, 2015 at 19:56

deavisdude

731 silver badge7 bronze badges

Collectives™ on Stack Overflow

Angular $scope not showing correct data in HTML

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related