[SOLVED] calling custom directive of angular js inside popover data-content

calling custom directive of angular js inside popover data-content

I have a written a new directive(showfor) to enable popover in my UI using angular and bootstrap. the "showfor" directive works inside the html, but not inside data-content. I need the popover to show the list(not the entire array). Any kind of help will be appreciated.

Code is:

'use strict';
var isbnApp = angular.module('plunker', []);

isbnApp.directive('mypopover', function() {
  return function(scope, element) {
    element.popover();
  };
});

isbnApp.directive('showfor',function(){
  return{
    restrict:"AEC",
    template:"<li data-ng-repeat='item in records'>{{item.imageType}}</li>"
  };
});

isbnApp.controller('popCtrl', function($scope) {
  $scope.records = [{
    "imageType": "JPEG",
    "rendition": "cover_80"
  }, {
    "imageType": "TIFF",
    "rendition": "cover_20"
  }];

});

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>Content Discovery</title>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script data-require="angular.js@*" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.9/js/tether.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
  <script src="app.js"></script>
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
</head>

<body>
  <div class="container" data-ng-controller="popCtrl">
    <br />
    <a mypopover="" tabindex="0" role="button" 
    class="btn btn-primary btn-sm" 
    data-container="body" data-toggle="popover" 
    data-html="true" title="<b>Coltrane Data</b>" 
    data-content="<showfor></showfor>">
              Coltrane
      </a>
    <showfor></showfor>
  </div>
</body>

</html>

See the plunkr Link for the demo: https://plnkr.co/edit/aJF4QIlGbMdpHZAvU8m9?p=preview

Solution

The html inside the data-content is not getting compiled so we need to add a angular directive to do this.

The proper directive was taken from the below link, checkout the reference link also

.directive('popover', function($compile, $timeout){
  return {
    restrict: 'A',
    link:function(scope, el, attrs){
      var content = attrs.content; //get the template from the attribute
      var elm = angular.element('<div />'); //create a temporary element
      elm.append(attrs.content); //append the content
      $compile(elm)(scope); //compile 
      $timeout(function() { //Once That is rendered
        el.removeAttr('popover').attr('data-content',elm.html()); //Update the attribute
        el.popover(); //set up popover
       });
    }
  }
})

JSFiddle: https://jsfiddle.net/Kai_Draord/b9eogz1v/1/

Reference: angular bootstrap popover