3

I want to create a html popover with angular-bootstrap popover-template

The directive itself is in path:

app/scripts/directives/popover.js

angular.module('c2gyoApp')
  .directive('tariffPopover', function () {
    return {
      restrict: 'A',
      transclude: true,
      scope: {
        text: '@tariffPopover'
      },
      template:
        '<span ng-transclude></span>' +
        '&nbsp;' +
        '<span popover-placement="right" ' +
        '      popover-template="pop.html" ' +
        '      popover-trigger="mouseenter" ' +
        '      class="fa fa-info-circle">' +
        '</span>'
    };
  });

The pop.html is a simple html file:

<h1>Hi</h1>

I'm using it in a view in

app/views/c2g.html

<div class="checkbox">
  <label>
    <input type="checkbox"
           ng-model="rental.airport">
    <span tariff-popover="{{info.airport}}">
      Flughafenpauschale
    </span>
    <br/>
  </label>
</div>

I can't figure out where I have to put the pop.html template. I've tried the following paths:

  • In the base directory of the app app/pop.html
  • In the same directory as the popover.js directive app/scripts/pop.html
  • In the same directory as the c2g.html view app/views/pop.html

I've also tried setting the popover-template paths to app/pop.html, app/scripts/pop.html and app/views/pop.html. However the Popover doesn't pop up. What's the correct path for the html template?

@Aviro changing the content of pop.html to

<script type="text/ng-template" id="pop.html">
   <h1>Hi</h1>
</script>

doesn't help.

||||||
  • I have attached a plunker example for more details. – Aviro Jul 9 '15 at 21:43
3

The popover-template needs to be a variable. This works:

app/views/c2g.html

<div class="checkbox">
  <label>
    <input type="checkbox"
           ng-model="rental.airport">
    <span tariff-popover="views/pop.html">
      Flughafenpauschale
    </span>
    <br/>
  </label>
</div>

app/scripts/directives/popover.js

angular.module('c2gyoApp')
  .directive('tariffPopover', function () {
    return {
      restrict: 'A',
      transclude: true,
      scope: {
        text: '@tariffPopover'
      },
      template:
        '<span ng-transclude></span>' +
        '&nbsp;' +
        '<span popover-placement="right" ' +
        '      popover-template="text" ' +
        '      popover-trigger="mouseenter" ' +
        '      class="fa fa-info-circle">' +
        '</span>'
    };
  });
||||||
0

If you really want to deal with an external template, you can define those in another HTML file (which is being used by another view) as below.

<script type="text/ng-template" id="pop.html">
   <h1>Hi</h1>
</script>

This can be called and embedded in an directive as wish.

I rather like to update the directive as below.

    angular.module('c2gyoApp')
      .directive('tariffPopover', function () {
        var getTemplate = function () {
            var template = '';
                template = $templateCache.get("pop.html");
            }
            return template;
        };

    return {
      restrict: 'A',
      transclude: true,
      scope: {
        text: '@tariffPopover'
      },
      link: function(scope, element, attrs) {
            var popOverContent = getTemplate();
            popOverContent = $compile("<div>" + popOverContent+"</div>")(scope);

            var options = {
                //title       : title,
                content     : popOverContent,
                placement   : "right",
                html        : true,
                date        : scope.date,
                trigger     : "hover"
            };
            $(element).popover(options);
      }
    };
  });

This is a plunker, which might help to understand this better.

||||||
  • I added the <script> tag to the template. Doesn't help. Can you correct the syntax of your alternative approach? – mles Jul 7 '15 at 17:28
  • I corrected the syntax. The important thing to remember is once you modify the contents using an external template, you need to use $compile to compile before link to a scope. This is the approach followed here. – Aviro Jul 7 '15 at 20:49
  • Let me know if you find any success with the second approach. I am using this in my solutions to display custom HTML templates with popovers. See my plunk for details. plnkr.co/edit/8tB6bA?p=preview. – Aviro Jul 8 '15 at 21:31
  • Thanks for the effort, but I'd rather rely on something that has been built before. I tried your approach but couldn't load my html template into the templateCache. – mles Jul 12 '15 at 21:28
  • Did you refer the Plunker attached. This is a working solution. This method of templates are called inline templates and need to be defined in the same HTML file. If the template resides outside of the page, you need to pre-load them to $templateCache using ajax $http. On the other hand why did you down vote this approach. This is a much better versatile approach than your suggested one. – Aviro Jul 13 '15 at 3:02
-1

There's the attribute popover which takes the actual text that you want to display. I think that will work (you can find an example on the same page that you linked in your question).

It would look something like this:

angular.module('c2gyoApp')
  .directive('tariffPopover', function () {
    return {
      restrict: 'A',
      transclude: true,
      scope: {
        text: '@tariffPopover'
      },
      template:
        '<span ng-transclude></span>' +
        '&nbsp;' +
        '<span popover-placement="right" ' +
        '      popover="<h1>Hi</h1>" ' +
        '      popover-trigger="mouseenter" ' +
        '      class="fa fa-info-circle">' +
        '</span>'
    };
  });

Also, if you still want to put that on a separate html file, I don't think that the location matters much, maybe you're just getting your path wrong, it happens to me a lot when I'm using Angular.

||||||
  • 1
    popover= escapes html – mles Jul 7 '15 at 17:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.