angularjs 指令和资源概念

Question

我一直在尝试 angularjs 并调用休息服务来显示特定的数据集，但是我在围绕自定义指令和资源的一些概念上苦苦挣扎。

目前我有一个自定义指令可以在系统中加载评论列表。评论列表是一个自定义指令，通过资源调用加载列表并显示列表。这在页面 A 中运行良好。

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

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

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

简而言之，如何在用户数据加载完成后让我的指令加载过滤后的评论？

请注意，我说的是用户和评论，目的是让人们了解我想做什么。实际数据更特定于领域，但数据关系是相同的。我也故意没有发布代码，因为我试图理解我应该采取的正确方法，而不是特定的代码问题。

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 指令和资源概念

angularjs directives and resource concepts

javascript

angularjs