CODEWITHSUNDEEP
javascripthtmlangularjs
deavisdude
deavisdude

Reputation: 73

Angular $scope not showing correct data in HTML

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

Upvotes: 2

Views: 795

Answers (3)

deavisdude
deavisdude

Reputation: 73

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.

Upvotes: 0

Mavlarn
Mavlarn

Reputation: 3883

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;

Upvotes: 0

Joshua Ohana
Joshua Ohana

Reputation: 6121

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; } );

Upvotes: 1

Related Questions