Question

问题在这里，我需要创建一个指令＆＃34; import＆＃34;另一个指令是恐怖的。为此，我将该另一个指令的属性添加到元素并重新编译。

我在每个可能的事件中添加了一个例子（来自元素或子元素，来自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']);
        }
      };
    }
  ]);

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

重新编译角度，但不重新绑定角度事件

2 个答案: