Attribute of label not working in angular directive?
angularjs, html, javascript
Solution
Your "wrapper" has the same `id` too and it is not good. You can remove it in a `link` function, this way:
link: function(scope,el,attrs){
el.removeAttr("id");
}
Working: http://jsfiddle.net/cherniv/5u4Xp/
Or in `compile` function (thanks to Florent):
compile: function(el){
el.removeAttr("id")
}
Example: http://jsfiddle.net/cherniv/7GG6k/
Problem
I am trying to learn how to work with angular directives and so far with success. I have only one minor issue I cannot figure out. In my directive I got a for attribute set on the same value of the id of an input field. But clicking on the label doesn't give the input control the focus like it should work normally. I got this issue worked out in some example code: ``` <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> ``` and the 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'; }]); ``` Same code in jsfiddle: http://jsfiddle.net/U92em/ What mistake am I making which causes my problem and how do I fix it?