如何使用角度指令包装元素？答案

【问题标题】：How to wrap an element using an angular directive?如何使用角度指令包装元素？
【发布时间】：2014-03-27 00:35:47
【问题描述】：

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

我们的想法是像这样使用它：

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

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

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

目前我发现的问题是，在 compile 函数上操作 DOM 后，<input> 似乎完全无法使用，我什至无法输入。这是我的小提琴：

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

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您不会在编译阶段操作 DOM，而是在链接阶段（实际上是 postLink）进行操作，因为直到那时 DOM 才真正正确设置。 Developer Guide中有一个例子。

【讨论】：

【解决方案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/

【讨论】：