CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-showangularjs-ng-init
Ole Albers
Ole Albers

Reputation: 9285

ng-show does not react to $scope.apply

I have the following markup:

<div class="liveResults">
  <div><img ng-show="home!==undefined" ng-src="{{homeImg}}"> </div>
  <div>0:0</div>
  <div><img ng-show="guest!==undefined" ng-src="{{guestImg}}"> </div>
</div>

Inside my controller I fill the data the following way:

$scope.init=function() {
    $.getJSON("http://www.example.com/somedata.json", function(result){
      $scope.home=result.home;
      $scope.guest=result.guest;
      $scope.homeImg=$scope.BigImage($scope.home);
      $scope.guestImg=$scope.BigImage($scope.guest);

      $scope.$apply();
      return;
    }
}

That function is run by ng-init="init()"

now the ng-src is filled correctly, but ng-show does not work as expected (the images are still hidden) I can see using the browsers devtools, that the images are there, but with a width and height of "0".

When I start the function a second time by assigning it to an ng-click-event, the images are shown correctly.

My guess would be that the combination of "ng-init" and "$scope.apply" causes the problem.

Upvotes: 0

Views: 266

Answers (1)

The Fabio
The Fabio

Reputation: 6250

The ng-src directive already have an implicit ng-show in it, so as the comments in you question illustrate this should work for you already:

<div class="liveResults">
  <div><img ng-src="{{homeImg}}"> </div>
  <div>0:0</div>
  <div><img ng-src="{{guestImg}}"> </div>
</div>

Upvotes: 1

Related Questions