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

Posted 2023-02-22

【中文标题】以角度重新编译元素，但不重新绑定角度事件[重复]

【英文标题】：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']);
        
      ;
    
  ]);

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

【参考方案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);