如何使用angular指令包装元素？

Question

我正在尝试创建一个角色组件，为<input>元素添加前缀。像这样：

这个想法就是这样使用它：

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

为此，我需要将<input>包裹在<div>容器周围，该容器还包含带前缀的<span>并添加一些自定义CSS。

我认为我需要使用指令compile函数来实现这一点，因为DOM操作，但我不太清楚它是如何工作的，我没有找到太多的文档。

到目前为止我发现的问题是，在编译函数上操作DOM之后，<input>似乎完全无法使用，我甚至无法输入它。这是我的小提琴：

http://codepen.io/anon/pen/vokxy - 无法在绿色包装内的<input>上输入内容。

Answer 1

您不会在编译阶段操作DOM，而是在链接阶段（实际上是postLink）进行操作，因为在此之前DOM实际上并未正确设置。 Developer Guide中有一个例子。

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/