如果您在单个 DOM 元素上有多个指令并且它们的应用顺序很重要，您可以使用该priority属性来对它们的应用程序进行排序。较高的数字首先运行。如果不指定优先级，则默认优先级为 0。

编辑：讨论后，这里是完整的工作解决方案。关键是删除属性: element.removeAttr("common-things");，以及element.removeAttr("data-common-things");（如果用户data-common-things在 html 中指定）

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false, 
      terminal: true, //this setting is important, see explanation below
      priority: 1000, //this setting is important, see explanation below
      compile: function compile(element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        return {
          pre: function preLink(scope, iElement, iAttrs, controller) {  },
          post: function postLink(scope, iElement, iAttrs, controller) {  
            $compile(iElement)(scope);
          }
        };
      }
    };
  });

工作 plunker 可在：http ://plnkr.co/edit/Q13bUt?p=preview

或者：

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      priority: 1000,
      link: function link(scope,element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        $compile(element)(scope);
      }
    };
  });

演示

解释为什么我们必须设置terminal: true和priority: 1000（一个很大的数字）：

当 DOM 准备好时，angular 会遍历 DOM 以识别所有已注册的指令，并根据priority 这些指令是否在同一元素上一一编译指令。我们设定的自定义指令的优先级为较高的数字，以确保它会被编译首先，用terminal: true，其他指令将被跳过该指令被编译后。

当我们的自定义指令被编译时，它将通过添加指令和删除自身来修改元素，并使用 $compile 服务来编译所有指令（包括那些被跳过的指令）。

如果我们不设置terminal:trueand priority: 1000，则有可能在我们的自定义指令之前编译某些指令。当我们的自定义指令使用 $compile 编译元素时 => 再次编译已经编译的指令。这将导致不可预测的行为，特别是如果在我们的自定义指令之前编译的指令已经转换了 DOM。

有关优先级和终端的更多信息，请查看如何理解指令的“终端”？

也修改模板的指令的示例是ng-repeat(priority = 1000)，ng-repeat编译时，ng-repeat 在应用其他指令之前制作模板元素的副本。

感谢@Izhaki 的评论，这里是对ngRepeat源代码的引用：https : //github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js

实际上，您只需一个简单的模板标签就可以处理所有这些。有关示例，请参见http://jsfiddle.net/m4ve9/。请注意，我实际上不需要超级指令定义上的 compile 或 link 属性。

在编译过程中，Angular 会在编译前引入模板值，因此您可以在那里附加任何进一步的指令，Angular 会为您处理。

如果这是一个超级指令，需要保留原来的内部内容，可以使用transclude : true，将里面替换为<ng-transclude></ng-transclude>

希望有帮助，如果有什么不清楚的，请告诉我

亚历克斯

这是一个将需要动态添加的指令移动到视图中并添加一些可选（基本）条件逻辑的解决方案。这使指令保持干净，没有硬编码逻辑。

该指令采用一个对象数组，每个对象包含要添加的指令的名称和要传递给它的值（如果有）。

我一直在努力想像这样的指令的用例，直到我认为添加一些条件逻辑可能很有用，这些逻辑只添加基于某些条件的指令（尽管下面的答案仍然是人为的）。我添加了一个可选if属性，它应该包含一个 bool 值、表达式或函数（例如在您的控制器中定义），以确定是否应该添加指令。

我还使用attrs.$attr.dynamicDirectives来获取用于添加指令（例如data-dynamic-directive, dynamic-directive）的确切属性声明，而无需检查硬编码字符串值。

Plunker Demo

angular.module('plunker', ['ui.bootstrap'])
    .controller('DatepickerDemoCtrl', ['$scope',
        function($scope) {
            $scope.dt = function() {
                return new Date();
            };
            $scope.selects = [1, 2, 3, 4];
            $scope.el = 2;

            // For use with our dynamic-directive
            $scope.selectIsRequired = true;
            $scope.addTooltip = function() {
                return true;
            };
        }
    ])
    .directive('dynamicDirectives', ['$compile',
        function($compile) {
            
             var addDirectiveToElement = function(scope, element, dir) {
                var propName;
                if (dir.if) {
                    propName = Object.keys(dir)[1];
                    var addDirective = scope.$eval(dir.if);
                    if (addDirective) {
                        element.attr(propName, dir[propName]);
                    }
                } else { // No condition, just add directive
                    propName = Object.keys(dir)[0];
                    element.attr(propName, dir[propName]);
                }
            };
            
            var linker = function(scope, element, attrs) {
                var directives = scope.$eval(attrs.dynamicDirectives);
        
                if (!directives || !angular.isArray(directives)) {
                    return $compile(element)(scope);
                }
               
                // Add all directives in the array
                angular.forEach(directives, function(dir){
                    addDirectiveToElement(scope, element, dir);
                });
                
                // Remove attribute used to add this directive
                element.removeAttr(attrs.$attr.dynamicDirectives);
                // Compile element to run other directives
                $compile(element)(scope);
            };
        
            return {
                priority: 1001, // Run before other directives e.g.  ng-repeat
                terminal: true, // Stop other directives running
                link: linker
            };
        }
    ]);

<!doctype html>
<html ng-app="plunker">

<head>
    <script src="//code.angularjs.org/1.2.20/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>

<body>

    <div data-ng-controller="DatepickerDemoCtrl">

        <select data-ng-options="s for s in selects" data-ng-model="el" 
            data-dynamic-directives="[
                { 'if' : 'selectIsRequired', 'ng-required' : '{{selectIsRequired}}' },
                { 'tooltip-placement' : 'bottom' },
                { 'if' : 'addTooltip()', 'tooltip' : '{{ dt() }}' }
            ]">
            <option value=""></option>
        </select>

    </div>
</body>

</html>

我想添加我的解决方案，因为接受的解决方案对我来说不太适用。

我需要添加一个指令，但也要在元素上保留我的指令。

在这个例子中，我向元素添加了一个简单的 ng-style 指令。为了防止无限编译循环并允许我保留我的指令，我在重新编译元素之前添加了一个检查以查看我添加的内容是否存在。

angular.module('some.directive', [])
.directive('someDirective', ['$compile',function($compile){
    return {
        priority: 1001,
        controller: ['$scope', '$element', '$attrs', '$transclude' ,function($scope, $element, $attrs, $transclude) {

            // controller code here

        }],
        compile: function(element, attributes){
            var compile = false;

            //check to see if the target directive was already added
            if(!element.attr('ng-style')){
                //add the target directive
                element.attr('ng-style', "{'width':'200px'}");
                compile = true;
            }
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {  },
                post: function postLink(scope, iElement, iAttrs, controller) {
                    if(compile){
                        $compile(iElement)(scope);
                    }
                }
            };
        }
    };
}]);

尝试将状态存储在元素本身的属性中，例如 superDirectiveStatus="true"

例如：

angular.module('app')
  .directive('superDirective', function ($compile, $injector) {
    return {
      restrict: 'A',
      replace: true,
      link: function compile(scope, element, attrs) {
        if (element.attr('datepicker')) { // check
          return;
        }
        var status = element.attr('superDirectiveStatus');
        if( status !== "true" ){
             element.attr('datepicker', 'someValue');
             element.attr('datepicker-language', 'en');
             // some more
             element.attr('superDirectiveStatus','true');
             $compile(element)(scope);

        }

      }
    };
  });

我希望这可以帮助你。