-
-
Save jbruni/6629714 to your computer and use it in GitHub Desktop.
<p>Here comes the <b>bindable HTML</b> popover contents!!!</p> | |
<p>Number: {{number}}</p> |
<div ng-init="number = 108"> | |
<button popover-template="example-template.html" class="btn">Example</button> | |
</div> |
<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> |
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; | |
}]); |
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?
Worths mentioning that this Gist addresses this issue:
angular-ui/bootstrap#220
feat(popover): Support template URL for partial