如何使用角度指令包裝元素？

Question

我正在嘗試創建一個向<input>元素添加前綴的角度組件。 像這樣：

想法是像這樣使用它：

<input type="text name="url" input-prefix="http://">

為此，我需要將<input>包裹在<input> <div>容器周圍，該容器還將包含帶有前綴的<span>並添加一些自定義CSS。

我相信由於DOM操作，我需要使用指令compile功能來實現此目的，但是我不太了解它是如何工作的，並且我也沒有找到太多文檔。

到目前為止，我發現的問題是，在編譯函數上操作了DOM之后， <input>似乎完全不可用，我什至無法鍵入它。 這是我的小提琴：

http://codepen.io/anon/pen/vokxy-無法在綠色包裝紙內的<input>上鍵入。

Answer 1

您沒有在編譯階段就操作DOM，而是在鏈接階段（實際上是postLink）進行操作，因為在那之前DOM尚未真正正確設置。 開發人員指南中有一個示例。

Answer 2

將代碼移至鏈接方法，這是一個有效的示例。

例：

var app = angular.module('my-app', []);

app.controller("myController", function($scope) {
  $scope.ctrl = this;
  $scope.name = "w";
  $scope.minLength = 3;
});

    app.directive("inputPrefix", function() {
      return {
        restrict: 'A',
        link: function(scope,element, attrs) {
          var wrapper = angular.element(
            '<div class="prefixed-input">');

          element.after(wrapper);           
          element.removeAttr("input-prefix");
          wrapper.append(element);                     
        }
      }
    });

實時示例： http ： //jsfiddle.net/choroshin/cnc5m/