jquery - 重新编译 Angular 元素，但不重新绑定(bind) Angular 事件

Question

这个问题已经有答案了:

Add directives from directive in AngularJS (7 个回答)

已关闭 6 年前。

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

我添加了一个关于摆弄每个可能事件的示例(来自元素或子元素，来自 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']);
        }
      };
    }
  ]);

您知道如何解决这个问题吗？

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