CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Alex Grs
Alex Grs

Reputation: 3301

AngularJS Popover not rendering inside a directive

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'
    };
  }
})();

Upvotes: 2

Views: 1316

Answers (1)

Michel
Michel

Reputation: 28269

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

Upvotes: 2

Related Questions