Question

我创建了一个指令来添加带有label标签的提示图标，如下所示：

     propertyWindowModule.directive('hintIcon', {
        restrict: 'A',
        controller: HintIconController,
        controllerAs: 'vm'
     });

     class HintIconController {
       static $inject = ['$element', '$timeout'];
       constructor(private $element:ng.IRootElementService,
                   private $timeout: ng.ITimeoutService) {
           if(!_.isEmpty(this.$element.attr('hint-icon'))) {
               this.$element.attr('title', this.$element.attr('hint-icon'));
               this.$element.append($('<i class="tooltip-icon glyphicon glyphicon-question-sign">').attr('title', this.$element.attr('hint-icon')));
           }
       }
    }

在某些观点中，我在标签中使用了它：

    <label ng-bind="vm.label" hint-icon="test icon"></label>

ng-bind不起作用，但hint-icon效果很好 - 我在工具提示中看到了描述的图标，但没有标签。

Answer 1

实际上，当你在一个元素中定义两个指令时，它会抛出一个异常：＆＃34;一个范围的多个指令！＆＃34;。因此，您需要在hint-icon指令中定义自己的ng-bind。

<label hint-icon="test icon" hint-icon-bind="vm.label"></label>

propertyWindowModule.directive('hintIcon', {
    restrict: 'A',
    scope: {
        hintIconBind: '='
    }, 
    controller: HintIconController,
    controllerAs: 'vm'
})

你在你的控制器中使用它，如：

scope.vm.hintIconBind

ng-bind在自定义指令的标签中不起作用

1 个答案: