Question

我一直在玩angularjs并调用rest服务来显示特定的数据集，但是我正在努力解决有关自定义指令和资源的一些概念。

目前我有一个自定义指令，用于加载系统中的注释列表。注释列表是一个自定义指令，它通过资源调用加载列表并显示列表。这在第A页中运行良好。

在第B页中，我通过网址显示单个用户。例如site.com/user/3 - 将其作为REST资源加载为页面模型。这也很好。

我想要实现的是将comments指令放在用户页面中，以便它只显示该用户的注释列表。我正在假设我可以以某种方式接受用户并以某种方式将其传递给指令作为评论的过滤器。

这种方法似乎不起作用。据我所知，该指令是在用户的承诺完成之前应用的，所以我以未经过滤的评论结束。

简而言之，如何在用户数据加载完成后获取加载过滤后的注释的指令？

请注意我正在谈论用户和评论，以便让人们知道我想要做什么。实际数据更具域特性，但数据关系相同。我也故意不发布代码，因为我试图理解我应该采取的正确方法，而不是特定的代码问题。

Answer 1

我并不是真的赞成严格的规则，但在我看来：

指令实际上是用于DOM操作+表示，最好是作为自主的，可重用的组件。在您的示例中，您的指令应该完全关注显示注释列表的UI。
与服务器的交互，评论的过滤等应该由一个服务来管理，该服务将是您的指令的依赖。因此，在您的示例中，您将在服务中使用一个方法：getUserComments = function（userID），它检索该用户的注释。该指令获取该数据并更新其DOM部分。

看起来像是：

angular.service('CommentService',
    function($http, $q){

        this.getUserComments = function(userID){

            var deferred = $q.defer();

            $http.get('site.com/user/' + userID).
                success(function(comments) {

                   deferred.resolve(comments)

                }).
                error(function(data, status) {

                   deferred.reject(status);

                });

            return deferred.promise;
        };

    }
); // End CommentService

angular.directive('commentList',
   function(CommentService){

      return {
         restrict : 'EA',
         template : '<ul><li ng-repeat="comment in comments">{{comment.text}}</li></ul>',
         scope : true,
         replace : true,
         link : function(scope, elem, attrs){

             // get User ID from somewhere
             var userID = 3;
             CommentService.getUserComments(userID).then(
                 function(comments){
                    scope.comments = comments;
                 }
             );

         }  
      }
   }
);

希望有意义！

angularjs指令和资源概念

1 个答案: