Angularjs 如何使用promise将内容绑定到单个div_Angularjs_Angular Promise

Angularjs 如何使用promise将内容绑定到单个div

angularjs

Angularjs 如何使用promise将内容绑定到单个div,angularjs,angular-promise,Angularjs,Angular Promise,此plnkr:将内容绑定到循环中的三个div: src: { "content" : "divContent" , "id" : "r1" } <!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <sc

此plnkr:将内容绑定到循环中的三个div:

src:

{ "content" : "divContent" , "id" : "r1" }


<!doctype html>
<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>

  <div ng-controller="FetchCtrl">

<div ng-repeat="id in ids">
  <div ng-bind="content" ></div>
</div>

  </div> 

  </body>
</html>

// Example of how to call AngularJS $http service and
// process the returned promise

function FetchCtrl($scope, $http, $q) {

$scope.ids = ["r1", "r2", "r3"];

$scope.ids = $scope.ids.map(function(id){
    var getString = 'http-hello1.html?id='+id
    return $http.get(getString);
});

$scope.responses = [];

$q.all($scope.ids).then(function (values) {

      var counter = 0;
      values.map(function(m){
        $scope.content = m.data.content;
      })

    })


}

{“content”：“divContent”，“id”：“r1”}
//如何调用AngularJS$http服务和
//处理退回的承诺
函数FetchCtrl（$scope，$http，$q）{
$scope.ids=[“r1”、“r2”、“r3”]；
$scope.ids=$scope.ids.map（函数（id）{
var getString='http-hello1.html？id='+id
返回$http.get（getString）；
});
$scope.responses=[]；
$q.all（$scope.id）。然后（函数（值）{
var计数器=0；
值映射（函数（m）{
$scope.content=m.data.content；
})
})
}

但是如何将每个get请求的结果绑定到特定的div

可以添加id:

，但这意味着我需要维护id、值条目的映射？有没有一种惯用的angularjs方法可以实现这一点？

我认为一个动态获取内容的指令可能是您的答案。因此，我建议不要使用

$q.all（）

，而是根据计时器或特定触发器分别获取内容。

$q.all（）

的缺点是，如果其中一个承诺失败，它们都会失败

在了解指令需要获取的特定URL方面，您必须向要使用的指令提供该信息

这是一个您可以编写的指令的非常粗略的示例。这样做的好处是，您不必担心

绑定不安全的html

或包含

ngSanitize

，您只需在

链接

函数中重置

元素

的值

由于我无法从功能/产品的角度更好地了解您试图实现的目标，因此我只能根据提供的信息提出建议。

我认为动态获取内容的指令可能是您的答案。因此，我建议不要使用

$q.all（）

，而是根据计时器或特定触发器分别获取内容。

$q.all（）

的缺点是，如果其中一个承诺失败，它们都会失败

在了解指令需要获取的特定URL方面，您必须向要使用的指令提供该信息

这是一个您可以编写的指令的非常粗略的示例。这样做的好处是，您不必担心

绑定不安全的html

或包含

ngSanitize

，您只需在

链接

函数中重置

元素

的值

由于我无法从功能/产品的角度更好地了解您试图实现的目标，因此我只能根据提供的信息提出建议。

是否有理由需要获取内容的HTML？@SeanLarkin div的内容是可变的，所以我将重新调用代码，大约每10秒获取一次div内容。好的，那么重复的目的是什么？动态获取此内容时，是否总是有3个div需要有特定的顺序？@SeanLarkin内容是动态的，因此不总是3个div。div将按循环的顺序呈现，但div内容会根据每个承诺完成的时间在不同的时间更新。是否计划使用bind html不安全来显示加载的数据？您可以使用directy$scope.values=values并使用values[$index]获取结果数据是否有需要获取内容HTML的原因？@SeanLarkin div的内容是可变的，因此我将每隔大约10秒重新调用代码以获取div内容。好的，那么重复的目的是什么？动态获取此内容时，是否总是有3个div需要有特定的顺序？@SeanLarkin内容是动态的，因此不总是3个div。div将按循环的顺序呈现，但div内容会根据每个承诺完成的时间在不同的时间更新。是否计划使用bind html不安全来显示加载的数据？您可以使用directy$scope.values=values和values[$index]来获取结果数据

angular.module('whateverYourModuleNameIs')
  .directive('dynamicRow', ['$http', '$interval', dynamicRowDirectiveFn]);

function dynamicRowDirectiveFn($http, $interval) {
  return {
    restrict: "EA", // I guess this is your choice how it renders
    scope: {
      id: '=' // you could grab the id and use it in your request
    },
    link: function linkFn(scope, element, attrs) {
      // Use $interval to repeatedly fetch content
      var repeatFetchWhichReturnsAPromise = $interval(fetchNewContent, 60000 * 15) //Executes function every x milliseconds.

      // Function that executes every time your interval occurs
      function fetchNewContent() {
        $http.get('urlYouNeedToFetch'+id).then(
          fetchNewContentSucess, fetchNewContentError
        );
      }

      function fetchNewContentSuccess(responseObject){
        //This sets your new HTML based on promise success
        element = responseObject.data; 
      }
      
      function fetchNewContentError(responseObject){
       //If its a bad request we probably either want to stop repeating
       // You can choose to do something else
       $interval.cancel(repeatFetchWhichReturnsAPromise);
      }          
    
    }
  }
}