1

我是一个 angularjs 新手，我必须错过一些简单的东西。我想要做的是使用 angular ui 创建工具提示。我创建了一个客户指令，其中它将根据占位符值向元素的属性添加 3 个角度指令：

myApp.directive('ngTooltip', function () { 
    return{
        restrict: 'A',
        link: function (scope, element, attrs) {
            attrs.$set('tooltip', attrs['placeholder']);
            attrs.$set('tooltip-placement', 'bottom');
            attrs.$set('tooltip-trigger', 'focus');
        }
    }
});

在我的标记中，我有

它按预期呈现：

<input name="test" placeholder="this is test" tooltip="this is test" tooltip-placement="bottom" tooltip-trigger="focuse" />

但是，工具提示不起作用。如果我直接将 3 个工具提示属性应用于标记，则工具提示有效。

看起来自定义指令添加的 3 个指令没有被 angularjs 评估。

有任何想法吗？

4

1 回答 1

3

如果不使用 重新编译元素，则无法动态添加指令$compile，这将导致无限循环，除非您采取一些解决方法。有一种更简单的方法可以解决这个问题：声明一个指令模板，AngularJS 会正确处理这些指令。

myApp.directive('ngTooltip', function () { 
    return{
        restrict: 'A',
        template: '<input tooltip tooltip-placement="bottom" tooltip-trigger="focus">',
        replace: true,
        link: function (scope, element, attrs) {
          attrs.$set('tooltip', attrs['placeholder']);
        }
    }
});

工作示例：plunker。

于 2013-09-20T17:43:11.727 回答