通过另一个指令动态地将指令属性添加到元素，并使第一个'活动'

Question

我会尝试更具体。我正在使用tooltip套件的UI Bootstrap指令。它允许我以这种方式将工具提示绑定到输入tag：

<input 
    type="text"
    ng-model="inputModel" class="form-control"
    placeholder="tooltip without directive"
    tooltip="blabla"
    tooltip-placement="top"
    tooltip-trigger="mouseenter"
    tooltip-enable="!inputModel" />

由于一系列原因，我会将tooltip="blabla"属性与DOM元素联系起来。所以我已经创建了一个指令来完成这项工作：

(function(){
  'use strict';

  angular
    .module('ui.bootstrap.demo', ['ui.bootstrap'])
    .directive('errorHandler', Directive)

    function Directive(){
      return {
        restrict: 'A',
        replace: true,
        link : function(s,e,a) {
          e.attr('tooltip', 'blabla');
        }
      };
    }
})();

所以当我写：

<input 
    type="text"
    error-handler
    ng-model="inputModel" class="form-control"
    placeholder="tooltip with directive"
    tooltip-invalid-required="obbligatorio"
    tooltip-placement="top"
    tooltip-trigger="mouseenter"
    tooltip-enable="!inputModel" />

生成的代码等于第一个代码段的代码，但不显示工具提示。为什么我尝试compile，但我错过了一些东西。这是plunk。

Answer 1

您可以查看AngularJs + Bootstrap here的动态工具提示文档。 希望它可以帮到你。