标签属性的角度指令不工作？ [英] Attribute of label not working in angular directive?

问题描述

我想学习如何与角指令成功合作，至今。我只有一个小问题，我想不通。

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.

在我的指令，我得到了一个对属性的输入域的id的值相同设置。但点击标签上并没有给输入控制对焦像它应该工作正常。

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.

我得到这个问题的一些示例code摸索出：

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>

和JavaScript的：

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

同样code中的jsfiddle： http://jsfiddle.net/U92em/

什么错误我在做这导致了我的问题，如何解决？

What mistake am I making which causes my problem and how do I fix it?

推荐答案

您包装有相同的 ID 太，这是不好的。您可以在链接删除功能，这种方式：

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

工作： http://jsfiddle.net/cherniv/5u4Xp/

或在编译函数（感谢弗洛朗）：

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

例如： http://jsfiddle.net/cherniv/7GG6k/

这篇关于标签属性的角度指令不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！