JSFiddle - React, Tailwind, and code Playground

by Pavel Kityan

HTML

<div ng-app="customDirectives">

  <div ng-controller="testCtrl"> {{aa}}<custom-popover a-data="test1" popover-html="Some Popover Text" popover-placement="bottom" popover-label="Label"></custom-popover>

  </div>
</div>

JavaScript

customDirectives = angular.module('customDirectives', []);

customDirectives.controller('testCtrl', ['$scope', function($scope) {
$scope.aa = '123';
}]);

customDirectives.directive('customPopover', function() {
  return {
    restrict: 'AE',
    scope: {
    aa: '@',
    bb: '=aData'
    },
    template: '<span>Label {{bb}}</span>',
    link: function(scope, el, attrs) {
      console.log("Popover Directive Loaded");
      console.log(scope);
      console.log(attrs);
    }
  };
});

//angular.module('CustomComponents', ['customDirectives']);