How to bind content to individual div with promise

问题

This plnkr : https://plnkr.co/edit/BjETLN7rvQ1hNRIm51zG?p=preview binds content to three divs within loop : <div ng-repeat="id in ids">

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;
      })

    })


}

But how bind the result of each get request to the specific div ?

Could add id : <div id="{{id}}" ng-bind="content" ></div> but this means I need to maintain a map of id,value entries ? Is there an idiomatic angularjs way to achieve this ?

回答1:

I think a directive which dynamically fetches your content might be the answer for you.

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);
      }          

    }
  }
}

So Instead of using $q.all(), Id recommend individually fetching the content based on a timer or specific trigger. The downside with $q.all() is that if one of the promises fail, they all fail.

In terms of knowing what specific URL the directive needs to fetch, you'll have to provide that information to the directive to be used.

This is a very rough example of a directive that you could write. The upside is that you don't have to worry about bind-unsafe-html or include ngSanitize, you are instead just resetting the value of element inside your link function.

As I don't have a better picture of what you are trying to accomplish from a feature/product standpoint I can only suggest this based on the info provided.

来源：https://stackoverflow.com/questions/34953005/how-to-bind-content-to-individual-div-with-promise

标签

angularjs

angular-promise