Question

首次加载时，我希望应用程序在第一次加载时从X个http请求中异步检索数据（X基于水果中的元素数量），并更新一个指示已检索到多少项的指令。检索所有项目时，会触发一个事件，导致该指令/ dom元素自行隐藏。

用角度来实现这个目标的最佳方法是什么？以下是我认为服务，控制器和指令的职责是什么。这是正确的吗？或者应该有不同/更好的方法来做到这一点？

    APP.service('myService', function($http) {
       this.fruits = ['Apple', 'Bannana', 'Pear', 'Orange'];
       this.processedFruit = [];
    });

    APP.controller('myController', ['$scope', '$http', 'myService', function($scope,$http) {
          $scope.$emit('LOAD');
          // Should the following be in the service instead of the controller?
          for(var i = 0; i < myService.fruits; i++) {
                $http.get('someurl/'+fruits[i]).success(function(response) {
                    myService.processedFruit.push(response);


          // Somehow tell the "statusofloading" directive to update its (Completed $http Requests)?
            });
      }
      // Once all requests are finished $scope.$emit('UNLOAD') somehow to the directive?;
}]);

APP.directive('statusofloading', function() {
    return {
        scope:true,
        restrict:'E',
        link: function($scope,e,a) {
                //Completed $http Requests
                $scope.completeRequests = 0;

                // Total $http Requests
                $scope.totalRequests = // Get the number from the service somehow from (length of this.fruits);
                        $scope.$on('LOAD', function(){$scope.loading=true});
                        $scope.$on('UNLOAD', function(){$scope.loading=false});      
        },
        replace: true,
        template:"<h1>({{completedRequests}}) / ({{totalRequests}}) </h1>"
    }
})

Answer 1

$ emit需要第二个参数，你可以传递任何你想要的东西。

$scope.$emit('LOAD',{totalRequests: myService.fruits});

然后在你的指令中：

$scope.$on('LOAD', function(args){
    $scope.loading=true;
    $scope.totalRequests = args.totalRequests;
});

然后在完成请求时告诉指令，它知道什么时候完成并且需要隐藏自己。确保通知指令失败的请求以及成功的请求。

另请参阅angular-busy了解该问题的另一种更通用的方法。

如何使用angularjs中的服务数据正确构造/更新指令？

1 个答案: