Атрибут метки не работает в угловой директиве?

Question

Я пытаюсь научиться работать с угловыми директивами и до сих пор с успехом. У меня есть только одна незначительная проблема, которую я не могу понять.

В моей директиве я получил атрибут for, заданный с тем же значением id поля ввода. Но нажатие на метку не дает входному управлению фокусом, как будто оно должно работать нормально.

Я получил этот вопрос разработан в некотором примере кода:

<div ng-app='test' ng-controller='testCtrl'> 
    <label for="test1">Testlabel 1</label><br> 
    <input id="test1" type="text"></input><br> 
    <my-input id="test2" 
       label="Testlabel 2" 
       placeholder="enter somthing" 
       text="testVar"></my-input><br> 
    <span>{{testVar}}</span> 
</div> 

и JavaScript:

angular.module('test', []) 
.directive('myInput', function() { 
    return { 
     restrict: 'E', 
     template: '<label for={{id}}>{{label}}</label><br>' + 
        '<input id={{id}} type="text" ' + 
        ' placeholder={{placeholder}} ng-model="text" />', 
     scope: { 
      id: "@", 
      label: "@", 
      placeholder: "@", 
      text: "=" 
     } 
    } 
}) 
.controller('testCtrl', ['$scope', function($scope) { 
    $scope.testVar = 'testing'; 
}]); 

тот же код в jsfiddle: http://jsfiddle.net/U92em/

Какую ошибку я делаю что приводит к моя проблема и как ее исправить?

Answer 1

Ваша «обертка» имеет то же самое id, и это не хорошо. Вы можете удалить его в link функции, таким образом:

link: function(scope,el,attrs){ 
    el.removeAttr("id"); 
} 

Рабочая: http://jsfiddle.net/cherniv/5u4Xp/

Или в compile функции (благодаря Florent):

compile: function(el){ 
    el.removeAttr("id") 
} 

Пример: http://jsfiddle.net/cherniv/7GG6k/