CODEWITHSUNDEEP
javascriptangularjs
gh9
gh9

Reputation: 10703

angular js $scope.apply function not updating template

When I return from my service call I seem unable to update my view. Why does 'not broken' never get out putted to the console?

the services returns [{test: 'service workies'}]

app.controller('foo-controller', ['fooService','$scope', function (fooService,$scope) {
    var ctrl = this;
    ctrl.Results = [{ test: 'no workies' }];
    ctrl.Search = function () {
        fooService.GetFoos().then(function (result) {
            console.log('test');
            console.log(ctrl.Results);
            ctrl.Results = result;
            console.log(ctrl.Results);
            $scope.$apply(function () {
                console.log('not broken');//never fires!!
                ctrl.Results = [{test : 'workies' }]
            });
        });
    };
    return ctrl;
}]);



  app.directive('fooLogo', function () {
        return {
            restrict: 'E',
            templateUrl: './App/Templates/foo.html',
            controller: 'foo-controller',
           controllerAs: 'f'

        };
    });

edit foo service

     .service('fooService', ['$http', function ($http) {

     return $http.get("https://www.googleapis.com/books/v1/volumes?q=harry+potter").then(

function(result){ return [{ test: 'service workies'}]}, 

function(error) { return [{test: 'service call no workies'}] );

Upvotes: 0

Views: 517

Answers (2)

pje
pje

Reputation: 2468

I see a few issues in your code. I don't see anywhere inside fooService where GetFoos() is declared, so that's one issue. Try the following:

app.controller('MainCtrl', ['$scope', 'BookQueryService',
  function($scope, BookQueryService) {

    $scope.search = function() {
      BookQueryService.getBooks().then(function(data) {
        $scope.books = data.data.items;
      });
    };

    // call immediately for the sake of this example
    $scope.search();
  }
]);

app.service('BookQueryService', ['$http',
  function($http) {
    var service = {};

    service.getBooks = function() {
      return $http.get("https://www.googleapis.com/books/v1/volumes?q=harry+potter");
    };

    return service;
  }
]);

app.directive('myBookList', function() {
  return {
    restrict: 'E',
    templateUrl: 'BookList.html',
    controller: 'MainCtrl'
  }
});

With the following html:

  <body>
    <my-book-list></my-book-list>
  </body>

And the following directive template:

<div>
  <ul>
    <li data-ng-repeat="book in books">
      {{book.volumeInfo.title}}
    </li>
  </ul>
</div>

Here's a plunker with a working example: http://plnkr.co/edit/KJPUWj0ghDi1tyojHNzI?p=preview

Upvotes: 2

Keenan Lidral-Porter
Keenan Lidral-Porter

Reputation: 1636

Is anything inside the fooService.GetFoos().then(function(result){...}) being run? If the code you posted is all there is for fooService, then it looks like there is no .GetFoos method & therefore nothing inside the following .then would get run.

Try adding a .error after the original .then that is chained onto fooService.GetFoos:

fooService.GetFoos().then(function (result) {
  // your code
}).error(function (data, status){
  console.log("Error!\t", status);
};

This will help you figure out what exactly is going on. Whenever your using any sort of promise, make sure you have a .catch or .error — they can save you a lot of trouble when debugging. Check out angular's $http documentation for more details.

Additionally, it looks like the original call to $scope.$apply() is unnecessary. You would only use that if you want to run a function outside of angular, or if you manually want to trigger the digest cycle (if that were the case calling $scope.$digest() explicitly would be much more appropriate than $scope.$apply.

Check out this blog post about when to use $scope.$apply and the $scope.$apply documentation page for more info

Upvotes: 0

Related Questions