AngularJS UI Bootstrap "extension" - Popover with bindable HTML template!

example-template.html

<p>Here comes the <b>bindable HTML</b> popover contents!!!</p>
<p>Number: {{number}}</p>

example.html

<div ng-init="number = 108">
  <button popover-template="example-template.html" class="btn">Example</button>
</div>

popover-template.html

<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
  <div class="arrow"></div>

  <div class="popover-inner">
      <h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
      <div class="popover-content"></div>
  </div>
</div>

popover_extension.js

angular.module( 'ui.bootstrap.popover' )
.directive( 'popoverTemplatePopup', [ '$templateCache', '$compile', function ( $templateCache, $compile ) {
  return {
    restrict: 'EA',
    replace: true,
    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
    templateUrl: 'template/popover/popover-template.html',
    link: function( scope, iElement ) {

      var content = angular.fromJson( scope.content ),
          template = $templateCache.get( content.templateUrl ),
          templateScope = scope,
          scopeElements = document.getElementsByClassName( 'ng-scope' );

      angular.forEach( scopeElements, function( element ) { 
        var aScope = angular.element( element ).scope();
        if ( aScope.$id == content.scopeId ) {
          templateScope = aScope;
        }
      });

      iElement.find('div.popover-content').html( $compile( template )( templateScope ) );
    }
  };
}])
.directive( 'popoverTemplate', [ '$tooltip', function ( $tooltip ) {
  var tooltip = $tooltip( 'popoverTemplate', 'popover', 'click' );

  tooltip.compile = function() {
    return {
      'pre': function( scope, iElement, iAttrs ) {
        iAttrs.$set( 'popoverTemplate', { templateUrl: iAttrs.popoverTemplate, scopeId: scope.$id } );
      },
      'post': tooltip.link
    };
  };

  return tooltip;
}]);

While this code works, it contains this horrible "forEach" loop from line 15 to line 20 - necessary to retrieve a scope having only its $id.

So, I can't recommend it.

It would be nice if there was a cleaner way to get the "popoverTemplate" directive scope from inside the "popoverTemplatePopup" directive.

The "glue" between the directives is angular.ui.bootstrap's $tooltip function, which would need to be modified to accomplish an easier way to retrieve the necessary scope.

Worths mentioning that this Gist addresses this issue:

angular-ui/bootstrap#220

feat(popover): Support template URL for partial

Hello,

I just tried this gist and got the following error:
Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element
http://errors.angularjs.org/1.2.0-rc.2/jqLite/nosel
at hasOwnPropertyFn (http://localhost:9000/bower_components/angular/angular.js:78:12)
at JQLite (http://localhost:9000/bower_components/angular/angular.js:1839:13)
at compile (http://localhost:9000/bower_components/angular/angular.js:4522:25)
at link (http://localhost:9000/scripts/modules/boilerplate.js:24:50)
at nodeLinkFn (http://localhost:9000/bower_components/angular/angular.js:5121:13)
at http://localhost:9000/bower_components/angular/angular.js:5271:13
at http://localhost:9000/bower_components/angular/angular.js:6311:11
at deferred.promise.then.wrappedCallback (http://localhost:9000/bower_components/angular/angular.js:9106:81)
at http://localhost:9000/bower_components/angular/angular.js:9192:26
at Scope.$get.Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:10034:28)

I'm having an hard time to track the problematic selector.

Hey there. Wondering if this neat little hacky directive is still functional and tested with the recent versions of angular and ui-bootstrap? I'm trying to incorporate this into my little project but something seems to be broken, because I'm not seeing any popover appearing on the screen, and no errors in the console.

The same here Rawry... Any chance of reproduce it on JSFIDDLE?