以角度重新编译元素，但不重新绑定角度事件[重复]答案

【问题标题】：Recompile an element in angular, but not rebind angular events [duplicate]以角度重新编译元素，但不重新绑定角度事件[重复]
【发布时间】：2017-04-12 07:09:42
【问题描述】：

问题来了，我需要创建一个动态“导入”另一个指令的指令。为此，我将这个其他指令的属性添加到元素并重新编译。

我在 fiddle 上添加了一个示例，用于处理每个可能的事件（来自元素或子元素，来自 Angular 或 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']);
        }
      };
    }
  ]);

您对如何解决此问题有任何想法吗？

【问题讨论】：

标签： jquery angularjs angularjs-directive jquery-events

【解决方案1】：

您可以使用此链接中的解决方案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']);
        }
      };
    }
  ]);

【讨论】：

工作就像一个魅力！ :)
所以，请检查答案是否正确:)

【解决方案2】：

它的发生是因为事件传播。试试下面的代码。

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

【讨论】：