Bootstrap 3 + AngularJS - Modal example

by sberube

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
<div ng-controller="MainCtrl" class="container">
  <span action-popover action-popover-id="foo">hover here to see advanced tooltip</span>
</div>

JavaScript

var mymodal = angular.module('mymodal', []);

mymodal.controller('MainCtrl', function($scope) {

});

mymodal.directive('actionPopover', function($compile) {
  return {
    restrict: 'A',
    scope: {
      actionPopoverId: '@',
      actionPopoverProcessEngineAction: '@'
    },
    link: function postLink(scope, element, attrs) {

      // Store in a filesystem file and load via require
      //var popoverTemplate = '<div class="popover action-popover-directive" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>';

      // Store in a filesystem file and load using require
      var popoverContent = '<a href="www.google.com">google {{actionPopoverId}} aaa</a>';

      // Compiles so we can resolve bindings
      var compiledContent = $compile(popoverContent)(scope);


      element.popover({
        html: true,
        content: compiledContent,
        container: 'body',
        trigger: 'hover',
        placement: 'auto'
      }).addClass('action-popover-directive');
    },
    controller: function($scope) {
      if ($scope.actionPopoverId) {
        // Make API call
      } else if ($scope.actionPopoverProcessEngineAction) {
        // Use existing data, do nothing really.
      }

    }
  };
});