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

Question

I'm trying to create an angular component that adds a prefix to an <input> element. Something like this:

The idea would be to use it like this:

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

For this I need to wrap the <input> around a <div> container which will also include a <span> with the prefix and add some custom CSS.

I believe I need to use the directive compile function to achieve this because of the DOM manipulation, but I don't understand very well how it works and I haven't found much documentation.

The issue I found so far is that after manipulating the DOM on the compile function, the <input> appears to be completely unusable, I cannot even type in it. Here's my fiddle:

http://codepen.io/anon/pen/vokxy - Can't type on the <input> inside the green wrapper.

Answer 1

You don't manipulate the DOM in the compile phase, you do it in link phase (postLink actually), since the DOM isn't actually set up correctly until then. There's an example in the Developer Guide .

Answer 2

Moved your code to link method, here's a working example.

Example:

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

Live example: http://jsfiddle.net/choroshin/cnc5m/