在哪里操纵通过AJAX服务获得的数据？链接fn或控制器？

Question

我有一个HTML部分,我也试图绑定AJAX数据.出于某种原因,似乎我必须将AJAX服务调用放在指令的link函数中.我不能把它放在控制器中; 我在这样的指令中这样做:

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

首先,我很好奇为什么我不能在我的控制器中执行此操作.但是,一旦我得到它,我想对数据进行一些操作.是否所有这些都需要在链接函数中发生.在控制器循环$scope.myData中将无法工作,因为它尚未定义？我可以以某种方式在我的控制器中使用我的AJAX数据而无需在链接文件中执行我的逻辑吗？

Answer 1

任务可以通过各种方式完成,但问题是哪种做法最好.首先,如果你有一个部分指令并且想要绑定它,你可以在指令的控制器中执行它

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控制器和THICK服务..如果您必须操纵数据.在服务中执行此操作并将此类形式的数据返回到可直接分配给控制器的控制器.这是最好的做法.即在你的服务.做这个

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