AngularJS - passing an interpolated html fragment to a directive attribute

Question

AngularJS - passing an interpolated html fragment to a directive attribute

I have a controller that receives a json list of items and repeats them in my view. I am using a variation of the bootstrap popover and would like to insert the order ID within the sub template defined my $scope.popover and have it parsed for variables. I read that the square brackets was the way to go but it does not seem to work for me.

function ManageOrderCtrl($scope, $http) {
  $scope.subtemplate = '<input class="hidden" value="[order._id]">';

  $http.get('/api/orders').
    success(function(data, status, headers, config) {
      $scope.orders = data.orders;
    });

  };
}

Template (is actually a directive - a variation of the bootstrap popover):

<li ng-repeat="order in orders">
   <a href="#" popover="{{ subtemplate }}">{{ order._id }}</a>
<li>

javascript
angularjs

Answer 1

You can try something like

<li ng-repeat="order in orders">
   <a href="#" popover="<input class="hidden" value='{{order._id}}'">{{ order._id }}</a>
<li>

Instead of defining the template in controller. You can also create templates using ngInclude and include them in the html.