AngularJS Popover not rendering inside a directive

Question

EDIT: Here is a plunkr for my issue: http://plnkr.co/edit/4U6XZKewA3EdFmHeqxwF?p=preview

(The UI behavior is good, there is no content in the popover but I'm not able to reproduce the error message I get in my dev env.)

I'm trying to call an angular ui-bootsrap popover based on a template inside a custom directive. Sadly, it is not working. When I don't use a popover-template there is no issue at all. I'm stuck finding the root cause of this issue... If you guys have any idea it would be greatly appreciated.

Error Message:

22/07/2015-11:27:43::[global]>  TypeError: element.parent is not a function
    at queueAnimation (http://localhost:3000/bower_components/angular-animate/angular-animate.js:2101:26)
    at Object.push (http://localhost:3000/bower_components/angular-animate/angular-animate.js:2053:16)
    at Object.enter (http://localhost:3000/bower_components/angular/angular.js:5181:31)
    at http://localhost:3000/bower_components/angular-bootstrap/ui-bootstrap-tpls.js:3052:24
    at publicLinkFn (http://localhost:3000/bower_components/angular/angular.js:7415:29)
    at http://localhost:3000/bower_components/angular-bootstrap/ui-bootstrap-tpls.js:3050:43
    at processQueue (http://localhost:3000/bower_components/angular/angular.js:14567:28)
    at http://localhost:3000/bower_components/angular/angular.js:14583:27
    at Scope.$eval (http://localhost:3000/bower_components/angular/angular.js:15846:28)
    at Scope.$digest (http://localhost:3000/bower_components/angular/angular.js:15657:31)

Directive Template app/directive.html :

<span ng-repeat="monitoringResult in data">
  <a popover-template="'app/popoverStatusTemplate.html'" popover-trigger="mouseenter">
<span>Data 1</span>
 </a>
</span>

Directive:

 (function() {
  'use strict';

  angular
    .module('app')
    .directive('directiveOne', directiveOne)

  /** @ngInject */
  function directiveOne($http) {
    /...../ // Do Stuff
    }

    return {
      restrict : 'EA',
      link : link,
      scope: {
        limit: '='
      },
      templateUrl : 'app/directive.html'
    };
  }
})();

Can you provide a Fiddle?

Cloudscape Germany
– Cloudscape Germany

2015-07-22 09:38:23 +00:00
Commented Jul 22, 2015 at 9:38 — Cloudscape Germany
– Cloudscape Germany, Commented Jul 22, 2015 at 9:38
I edited my question with a link to plunkr.

Alex Grs
– Alex Grs

2015-07-22 10:11:37 +00:00
Commented Jul 22, 2015 at 10:11 — Alex Grs
– Alex Grs, Commented Jul 22, 2015 at 10:11

Michel · Accepted Answer · 2015-07-22 13:14:30Z

2

Make sure that your template is wrapped in a tag, so that it could be injected, i.e., from the example in your plnkr, replace in popoverStatusTemplate.html :

popover Template

with :

<span>popover Template</span>

Updated plnkr

answered Jul 22, 2015 at 13:14

Michel

28.6k6 gold badges67 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alex Grs Over a year ago

Wow. Thank you. Is it explained somewhere you need to add tags to html inserted in popover ?

Collectives™ on Stack Overflow

AngularJS Popover not rendering inside a directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related