javascript - 在哪里处理通过 AJAX 服务获得的数据？链接 fn 或 Controller ？

Question

我有一个 HTML 部分，我也在尝试绑定(bind) AJAX 数据。出于某种原因，我似乎必须将 AJAX 服务调用放在指令的链接函数中。我不能把它放在 Controller 里；我在指令中这样做:

link: function(scope){
  MyService.getData().then(function(res){
    scope.myData = res.data;
  }, function(res){
    throw new Error('Error getting data');
  });
}

首先，我很好奇为什么我不能在我的 Controller 中执行此操作。而且，一旦我得到数据，我想对数据进行一些操作。这是否都需要在链接函数中发生。在 Controller 中遍历 $scope.myData 不会工作，因为它还没有定义？我能否以某种方式在我的 Controller 中使用我的 AJAX 数据，而不必在链接文件中执行我的逻辑？

Answer 1

任务可以通过多种方式完成，但问题是哪种做法最好。首先，如果你有一个带有 partial 的指令并且你想绑定(bind)到它，你可以在指令的 Controller 中完成

app.directive('myPartial', function() {
  return {
    restrict:'AE',
    template:'<pre>[{{myData| json}}]</pre>',
    scope:true,   
    link:function(scope, elem, attrs) {
      /*avoid using model manipulation in link function as it is mostly used 

      for DOM manipulation such as 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 时，您必须拥有THIN Controller 和THICK 服务。如果您必须操纵数据。在服务中执行并将这种形式的数据返回给可直接分配给 Controller 的 Controller 。这是最佳做法。 IE。在您的服务中。这样做

app.factory('MyService',function($http,$q){

     var _modifyGetData = function(serverData){
        // modify your data here...
        // for example -> serverData.usersCount = serverData.users.length;
        return serverData;
     };
     var getData = function(){
         var dfd = $q.defer();
         $http.get(/*Some url here*/).then(function(res){
              var data = res.data;
              // manipulate all your data using a function maybe
              data = _modifyGetData(data);
              dfd.resolve(data);   //resolve the modified 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