Recompile an element in angular, but not rebind angular events

Question

Here's the problem, I need to create a directive that "imports" another directive dynamically. To do so, I add the attribute of this other directive to the element and recompile.

I added an example on fiddle with every possible event (from element or child, from angular or jQuery). I tried everything I could, remove and re-append children, remove and read html, but no matter what I try, I always get at least one event repeated or one event gone.

http://jsfiddle.net/Lvc0u55v/12673/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div ng-controller="testCtrl">
    <div id="container-test" new-tooltip="New Tooltip" ng-click="clickContainer()">
      <button id="btn-test" ng-click="clickBtn()">Testing</button>
  </div>
</div>

Javascript

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

function testCtrl($scope) {

        jQuery('#btn-test').click(function(){
            alert('jquery button');
    })

    $scope.clickBtn = function() {
      alert('ng-click button');
    }

        jQuery('#container-test').click(function(){
            alert('jquery container');
    })

    $scope.clickContainer = function() {
      alert('ng-click container');
    }
}

myApp.directive('newTooltip', ['$timeout', '$compile',
    function($timeout, $compile) {

      return {
        restrict: 'A',
        scope: false,
        link: function(scope, element, attrs) {
              var value = attrs['newTooltip'];

              if (element.attr('uib-tooltip') != value) {
                  element.attr('uib-tooltip', value);
                  $compile(element)(scope);
              }
        }
      };
    }
  ]);

myApp.directive('uibTooltip', ['$timeout', '$compile',
    function($timeout, $compile) {

      return {
        restrict: 'A',
        scope: false,
        link: function(scope, element, attrs) {
              element.attr('title', attrs['uibTooltip']);
        }
      };
    }
  ]);

Do you have any idea on how to solve this issue?

Answer 1

You can use the solution in this link Add directives from directive in AngularJS

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

function testCtrl($scope) {

        jQuery('#btn-test').click(function(){
            alert('jquery button');
    })

    $scope.clickBtn = function() {
      alert('ng-click button');
    }

        jQuery('#container-test').click(function(){
            alert('jquery container');
    })

    $scope.clickContainer = function() {
      alert('ng-click container');
    }
}

myApp.directive('tgLangTooltip', ['$timeout', '$compile',
    function($timeout, $compile) {

      return {
        restrict: 'A',
        scope: false,
        terminal: true,
        priority: 1000,
        compile : function compile(element, attrs) {
            var value = attrs['tgLangTooltip'];
            element.removeAttr('tg-lang-tooltip');
            element.attr('uib-tooltip', value);

          return {
            pre: function preLink(scope, element, iAttrs, controller) {  },
            post: function postLink(scope, element, iAttrs, controller) {  
              $compile(element)(scope);
            }
          }
        }
      }
    }
  ]);

myApp.directive('uibTooltip', ['$timeout', '$compile',
    function($timeout, $compile) {

      return {
        restrict: 'A',
        scope: false,
        link: function(scope, element, attrs) {
              element.attr('title', attrs['uibTooltip']);
        }
      };
    }
  ]);

Answer 2

Its happening because of event propagation. Try the below code.

 link: function(scope, element, attrs) {
                  var value = attrs['tgLangTooltip'];

                  if (element.attr('uib-tooltip') != value) {
                   element.bind(attrs.stopEvent, function (e) {
                            e.stopPropagation();
                        });
                      element.attr('uib-tooltip', value);
                      $compile(element)(scope);
                  }
            }