重新編譯一個元素的角度，但不重新綁定角度事件

Question

這是問題所在，我需要創建一個指令，「導入」另一個指令dinamically。爲此，我將這個其他指令的屬性添加到元素並重新編譯。

我在每一個可能的事件（從元素或孩子，從角度或jQuery）添加一個例子。我盡我所能，刪除和重新安裝孩子，刪除和讀取html，但無論我嘗試什麼，我總是至少重複發生一個事件或一個事件消失。

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

你們是否有關於如何解決這個問題的任何想法？謝謝！

Answer 1

它是由於事件傳播而發生的。嘗試下面的代碼。

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

Answer 2

您可以使用此鏈接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']); 
     } 
     }; 
    } 
    ]);