我正在尝试创建一个角度指令(作为一个类),它动态地将角度ui工具提示添加到同一个元素。我试过跟随,但不幸的是,它不起作用。
MyApp.directive('ellipsis', [
'$compile', '$parse', '$timeout',
function ($compile, $parse, $timeout) {
// Runs during compile
return {
restrict: 'C',
// terminal: true,
// priority: 1000,
compile: function(element, attrs) {
var refresh = false;
if (attrs.uibTooltip == null) {
// attrs.$set('uibTooltip', "{{ tooltipText }}");
element.attr('uib-tooltip', "{{ tooltipText }}");
refresh = true;
}
if (attrs.uibTooltipEnable == null) {
// attrs.$set('uibTooltipEnable', "{{ ellipsisVisible }}");
element.attr('uib-tooltip-enable', "{{ ellipsisVisible }}");
refresh = true;
}
if (refresh) {
$compile(element);
}
return function(scope, iElm, iAttrs, controller) {
if (!refresh) {
return;
}
scope.$watch(function () {
return iElm[0].scrollWidth > iElm[0].offsetWidth;
}, function(ellipsisVisible) {
console.log("[mg] watch1", ellipsisVisible);
scope.ellipsisVisible = ellipsisVisible;
});
scope.$watch(function () {
return iAttrs.title == null ? iElm.text() : $parse(iAttrs.title);
}, function(tooltipText) {
console.log("[mg] watch2", tooltipText);
scope.tooltipText = tooltipText;
});
};
}
};
}
]);
添加refresh
变量的原因是为了防止无限递归(这样我们只在将任何属性添加到元素时才编译)。
PS:范围中的值很好(正如预期的那样)并且还有元素添加到元素中(例如,生成的标记看起来像<a class="ellipsis" uib-tooltip="{{ tooltipText }}" uib-tooltip-enable="{{ ellipsisVisible }}" >Some long overflowing text</a>
),但它不绑定到范围值。
我怀疑attrs.$set
是按字面意思设置表达式值而不是表达式。
欢迎提供示例或文档链接方面的任何帮助。感谢。
PS:我创建了一个小例子小提琴here。