我可以用兩個元素替換Angular指令嗎？

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); 
      } 
     } 
    } 
}); 

還沒有測試過，但我認爲這是要走的路（可能不是最好的一個）

Answer 2

您可以使用替換指令，但我會重新命名指令或者只是添加前綴，它得到的一個問題

.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>' 
    }; 
    });