Question

我正在尝试创建一个角度指令（作为一个类），它动态地将角度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。

类指令动态添加另一个指令

0 个答案: