Question

我有一个类似于以下内容的指令：

.directive('textInput', function() {
  return {
    restrict: 'E',
    replace: true,
    transclude: false,
    compile: function(element, attrs) {
      var html =
      '<div class="form-group">' +
        '<label>{{ \'' + attrs.label + '\' | translate }}</label>' +
        '<input type="text" class="form-control input-sm" placeholder="' + attrs.placeholder +
        '" ng-model="' + attrs.ngModel + '"' + attrs.directives + '>' +
      '</div>';

      var newElem = $(html);
      element.replaceWith(newElem);

      return function (scope, element, attrs, controller) { };
    }
  };
})

请注意，directives属性是添加了其他属性信息的字符串（例如工具提示信息）

我已将其转换为1.5 component，但我无法对directives定义执行相同操作。

.component('textInput', {
  bindings: {
    label: '@',
    placeholder: '@',
    directives: '<',
    ngModel: '='
  },
  require: {
    ngModelCtrl: 'ngModel'
  },
  template:
    '<div class="form-group">' +
      '<label ng-if="$ctrl.label">{{$ctrl.label | translate }}</label>' +
      '<input' +
        ' type="text"' +
        ' class="form-control input-sm"' +
        ' placeholder="{{$ctrl.placeholder}}"' +
        ' ng-model="$ctrl.ngModel"' +
        ' {{$ctrl.directives}}>' +
    '</div>'
})

<text-input directives="tooltip='foobar'"></text-input>

如何将字符串传递给<text-input/>元素，以便底层模板获取正确的信息？

Answer 1

根据文件，这是不可能的：

何时不使用组件：

用于依赖DOM操作的指令，添加事件侦听器   等等，因为你的编译和链接功能不可用   需要高级指令定义选项，如优先级，终端，   当你想要一个由a触发的指令时，多元素   属性或CSS类，而不是元素

并在同一页面中说组件没有compile功能。

Angular包装器组件采用其他指令

1 个答案: