将服务注入指令AngularJS和数据绑定。

我创建了一个服务，该服务使用$ http获取数据，并且此数据存储在此服务的变量中，同时我创建了一个使用该服务创建带选项的标记选择的指令，这些选项在服务中获得，但这是我的问题获得的数据永远不会与指令连接。将服务注入指令AngularJS和数据绑定。

服务和指导：

angular.module('myModule'[]) 
    .factory('myService', ['$http', function($http){ 
     var listOptions = []; 
     $http({ 
      method: 'GET', 
      url: 'urlToDataJson' 
      }).then(function(resp){ 
       listOptions = resp.data 
      }) 
     ; 
     return { 
      list: listOptions; 
     } 
    }] 
    .directive('myDirective', ['myService', function(myService){ 
     restrict: 'E', 
     template: '<select ng-options="item.id as item.name for item in list"></select>', 
     replace: true, 
     controller: ['$scope', function($scope) 
      $scope.list = MyService.list; 
     ] 
    }]) 
;

与Chrome的DevTool我可以看到数据后$ HTTP运行更新，但在选项中的数据未显示。

上面的代码是我需要做的一个例子。

来源

2016-02-14 rck6982

您的$http调用返回承诺对象。在函数中调用$http调用并返回promise对象，然后在您的指令中调用此函数并解析promise对象并获取数据。

具体来说，

getData(){ 
    return $http({ 
     method: 'GET', 
     url: 'urlToDataJson' 
     }).then(function(resp){ 
      listOptions = resp.data 
    ); // this returns a promise 
}

然后在你的指导，解决像这样的承诺：

MyService.getData().then(function(data){ 
    console.log(data); // <-- this is how you access the result of your $http call 
});

来源

2016-02-14 04:15:41 frishi

我会尽力做那，但为什么这样工作？我知道有一个异步调用，但结果被分配给一个变量。你能解释我一点吗？ – rck6982

您不知道http调用何时完成。如果你没有承诺这么做，由于JavaScript的异步特性，listOptions将是未定义的。如果没有承诺，您正尝试在http调用有机会完成之前分配listOption的值。 – frishi

现在我有一个怀疑，当我在ng-repeat中使用这个指令时会发生什么，会有多个请求吗？或者当数据在服务器中更新时发生了什么？谢谢！ – rck6982

你可以这样做也，

return $q(function (resolve, reject) { 

    $http({ 
     method: 'GET', 
     url: 'urlToDataJson' 
     }).then(function(resp){ 
      $scope.responseDate = resp.data; 
      resolve(responseData); 
     }); 
});

来源

2016-02-14 07:07:41

将服务注入指令AngularJS和数据绑定。

回答

相关问题