通过AJAX服务获取的数据应该在什么地方进行处理？在链接的函数（Link fn）还是控制器（Controller）中？

11 浏览
0 Comments

通过AJAX服务获取的数据应该在什么地方进行处理？在链接的函数（Link fn）还是控制器（Controller）中？

我有一个HTML部分，我想要将AJAX数据绑定到它上面。出于某种原因，似乎我必须将AJAX服务调用放在指令的链接函数中。我不能只把它放在控制器中；我在指令中这样做：

链接：function（作用域）{

MyService.getData().then（function（res）{

scope.myData = res.data;

}，function（res）{

throw new Error（'获取数据时出错'）;

}）;

}

首先，我想知道为什么我不能在我的控制器中这样做。另外，一旦我得到数据，我想对数据进行一些操作。那些操作需要在链接函数中完成吗？在控制器中循环遍历$scope.myData不起作用，因为它还没有被定义吗？我是否可以在控制器中以某种方式使用我的AJAX数据，而不必在链接文件中执行逻辑？

0

3 答案

0 Comments

当通过AJAX服务获取到数据时，我们可能会面临一个问题：在哪里处理这些数据？是在链接函数(link fn)中处理还是在控制器中处理？这个问题的出现是因为我们需要根据具体情况来决定数据获取自服务的位置。

以下是几种解决方法，具体哪种方法更好取决于您的需求：

  1. 如果这些数据只由指令来维护，那么您应该继续保持代码在链接函数中的方式。您可以在指令内封装数据及其操作。（显然，这种方法对您的情况不适用，但我只是解释了这种方法何时有意义）
  2. 如果这些数据只需要单个控制器访问，您可以通过指令公开一个作用域绑定，可以是单向或双向的，以适应您的需求。这样，您可以在控制器中获取数据，然后将其传递给指令进行操作。
  3. 如果这些数据将被多个指令和控制器访问，那么它应该完全存在于服务本身中。这样，无论控制器还是指令访问数据，它们都看到的是相同的数据。显然，您的问题是关于ajax调用，所以您需要为服务建立一个缓存机制。

无论如何，您应该尽量使用上述第三种方法来处理服务。但是，请注意在处理本地缓存时可能会遇到的问题。

希望这能帮到您。

编辑：

如果您需要编码示例，请告诉我，因为您的问题似乎更多是关于“我的选择有哪些”，而不是具体的技术实现细节。

祝好！

0
0 Comments

问题的原因是关于在AngularJS中从通过AJAX服务获取的数据中进行操作的问题，即在链接函数(link fn)中操作还是在控制器(controller)中操作。

解决方法是将操作数据的函数放在控制器中，然后通过ng-init调用该函数。

下面是一个示例代码，展示了如何在控制器中调用函数来加载数据，并通过ng-init在HTML标签中调用该函数：

.controller('myCtrl', function ($scope, MyService) {
    $scope.initData = function(){
        MyService.getData().then(function(res){
            $scope.myData = res.data;
          }, function(res){
            throw new Error('Error getting data');
          });
    }
}

然后在HTML的某个标签中使用ng-init来调用该函数：

这样做可以在渲染div标签时立即调用函数，从而加载数据。这种方法适用于大多数场景，并且在作者的情况下有效。作者认为这种方法更好，因为它可以立即调用函数，而不是在渲染div标签时调用函数。

感谢其他人的建议，作者认为这种方法更合理，并打算尝试一下。

0
0 Comments

在使用AngularJS处理数据时，有多种方法可以完成任务，但问题在于哪种方法是最好的。

首先，如果你有一个带有部分视图的指令，并且想要将数据绑定到它，可以在指令的控制器中完成。

app.directive('myPartial', function() {
  return {
    restrict:'AE',
    template:'<pre>[{{myData| json}}]</pre>',
    scope:true,   
    link:function(scope, elem, attrs) {
      /*避免在链接函数中使用模型操作，因为它通常用于DOM操作，例如angular.element(elem).addClass('myTemplateClass');*/
    },
    controller: function($scope,MyService){
         MyService.getData().then(function(dataFromServer){
             scope.myData = dataFromServer;
         }, function(err){
            throw new Error('Error getting data : ' + err);
         });
    }
  };
});

在使用AngularJS时，如果你需要操作数据，你需要使用瘦控制器和厚服务..最好的实践是，在服务中进行数据操作并将数据以可直接分配给控制器的形式返回。即在你的服务中这样做：

app.factory('MyService',function($http,$q){
     var _modifyGetData = function(serverData){
        // 在这里修改你的数据...
        // 例如 -> serverData.usersCount = serverData.users.length;
        return serverData;
     };
     var getData = function(){
         var dfd = $q.defer();
         $http.get(/*在这里放入URL*/).then(function(res){
              var data = res.data;
              // 使用一个函数来操作所有的数据
              data = _modifyGetData(data);
              dfd.resolve(data);   //解析修改后的数据
         });
         return dfd.promise;
     }
     return {
        getData:getData
     };
});

希望这能帮到你。

一些可能有帮助的在线资源：

https://scotch.io/tutorials/making-skinny-angularjs-controllers

https://teamgaslight.com/blog/4-lessons-learned-doing-angular-on-rails

这是最佳实践，如果你可以将控制器中的不必要逻辑去除，那就去掉它。控制器是驱动视图的地方，服务和工厂是放置额外逻辑（如数据操作）的地方。

完全正确。感谢你的评论和对答案的认可。

直接明了。正是我需要的。谢谢。

0