angular js $scope.apply 函数未更新模板

Question

当我 return 从我的服务呼叫中时，我似乎无法更新我的视图。为什么 'not broken' 永远不会输出到控制台？

服务 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'

        };
    });

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

Answer 1

fooService.GetFoos().then(function(result){...}) 里面的东西是运行吗？如果您发布的代码是 fooService 的全部内容，那么看起来没有 .GetFoos 方法，因此以下 .then 中的任何内容都不会得到运行.

尝试在链接到 fooService.GetFoos 的原始 .then 之后添加一个 .error:

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

这将帮助您弄清楚到底发生了什么。每当你使用任何类型的承诺时，请确保你有一个 .catch 或 .error ——它们可以在调试时为你省去很多麻烦。查看 angular 的 $http documentation 了解更多详情。

另外，原来对 $scope.$apply() 的调用似乎是不必要的。如果你想运行一个 angular 之外的函数，或者如果你想手动触发摘要循环（如果是这种情况，显式调用 $scope.$digest() 将是很多比 $scope.$apply.

更合适

查看此 blog post about when to use $scope.$apply and the $scope.$apply documentation page 了解更多信息

Answer 2

我发现您的代码中存在一些问题。我在 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

angular js $scope.apply 函数未更新模板

angular js $scope.apply function not updating template

javascript

angularjs