Question

我正在编写一个<password>指令，其中包含<input>后跟<span>（允许用户显示/隐藏密码的图标）。是否可以让Angular用这两个元素替换HTML中的指令元素，并将指令元素上存在的所有属性应用于<input>元素？

所以：

<password ng-model="myVar" ng-change="myTrigger" ng-whatever="myWhatever"></password>

会变成：

<span>
    <input type="password" ng-model="myVar" ng-change="myTrigger" ng-whatever="myWhatever"/>
    <span ng-click="togglePasswordVisibility()">show/hide</span>
</span>

如果用户将任何其他属性添加到<password>，则将其应用于<input>。

Answer 1

你必须在元素编译上手动完成：

.directive('password', function($compile) {
    return {
        restrict: 'E',
        replace: true,
        template: '<span>' +
            '<input type="password" />' +
            '<span ng-click="togglePasswordVisibility()">show/hide</span>' +
          '</span>';
        compile: function($element, $attr) {
            return function($scope, $element, $attr) {
                var input = $element.find('input[type=password]'),
                    attributes = $element.prop("attributes");
                angular.forEach(attributes, function() {
                    input.attr(this.name, this.value);
                });
                $compile($input)($scope);
            }
        }
    }
});

Haven没有测试过，但我认为这是要走的路（可能不是最好的）

Answer 2

你可以在指令中使用replace，虽然我会重命名指令或只是在它出现问题之前添加一个前缀

.directive('password', function() {
    return {
      restrict: 'E',
      replace: true,
      template: '<span>' +
          '<input type="password" ng-model="myVar" ng-change="myTrigger" ng-whatever="myWhatever"/>' +
          '<span ng-click="togglePasswordVisibility()">show/hide</span>' +
        '</span>'
    };
  });

我可以用两个元素替换Angular指令吗？

2 个答案: