угловая функция js $ scope.apply, не обновляющая шаблон

Когда я вернусь из своего служебного вызова, я, похоже, не могу обновить свой просмотр. Почему «не сломан» никогда не выходите на пульт?

услуги возвращает [{тест: 'сервис 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' 

     }; 
    });

редактировать Foo сервис

 .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'}]);

источник

2015-01-07 gh9

Вы можете разместить код для 'fooService' как хорошо, пожалуйста? – pje

@pje добавлена услуга – gh9

Выполняется ли '' test''? –

Я вижу несколько проблем в вашем коде, я не вижу где-нибудь внутри fooService где GetFoos() объявлена, так что это один вопрос, попробуйте следующее:.

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

Со следующей HTML:

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

И следующая директива шаблон:

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

Вот plunker с рабочим примером: http://plnkr.co/edit/KJPUWj0ghDi1tyojHNzI?p=preview

источник

2015-01-07 22:38:15 pje

Я дал плохой пример кода, проблемы, которые не были объявлены getFoos. Проблема была в моем шаблоне. Я сделал ui-sref и ng-click на якорный тег. ng-click не возникал. Удалив ng-click из тега привязки и положив его на автоматический запуск на контроллере, как и в вашем примере, исправлена моя проблема. – gh9

ли что-нибудь внутри fooService.GetFoos().then(function(result){...}) бежится? Если код, который вы отправили, есть все для fooService, то похоже, что нет .GetFoos метод &, поэтому ничего внутри .then не получится.

Попробуйте добавить .error после первоначального .then, который прикован на fooService.GetFoos:

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

Это поможет вам понять, что именно происходит. Всякий раз, когда вы используете какие-либо обещания, убедитесь, что у вас есть .catch или .error - они могут сэкономить вам массу неприятностей при отладке. За дополнительной информацией обратитесь к угловому $http documentation.

Кроме того, похоже, что первоначальный звонок $scope.$apply() не нужен. Вы использовали бы это только в том случае, если вы хотите запустить функцию вне углового или если вы вручную хотите запустить цикл дайджеста (если это так, то вызов, вызывающий $scope.$digest(), явно будет более подходящим, чем $scope.$apply.

Проверьте это . blog post о том, когда использовать $scope.$apply и $scope.$apply documentation page для получения дополнительной информации

источник

2015-01-07 22:35:13

угловая функция js $ scope.apply, не обновляющая шаблон

ответ

Смежные вопросы