Ярлык не работает в angularjs директиве

Question

Я использую этот пользовательский шаблон внутри директивы для создания настраиваемых полей ввода с ассоциированными этикетками:

template: function(elem, attrs) { 
     var elemTpl = '<div> ' + 
          '<div class="form-group col-md-{{cols}}" >' + 
           '<label for="{{id}}" class="control-label input-sm">{{text}}</label> ' + 
           '<input type="{{type}}" ng-model="value" name="' + attrs.id + '" id="' + attrs.id + 
           '" class="form-control input-sm szpFocusable" placeholder="{{placeholder}}" ng-required="required" spellcheck="false"/>' + 
          '</div> ' + 
         '</div>'; 

     return elemTpl; 
    } 

Проблема в том, что, когда метка будет нажата, то поле ввода не сфокусированы. Когда вы перемещаете код вне директивы и помещаете теги ввода непосредственно в html, все работает нормально. Идентификатор и атрибуты имени привязаны правильно к соответствующим полям области.

Answer 1

Вы уверены, что идентификатор, который вы используете, уникален?

Другой вариант заключается в гнезде <input> тег в <label>, в этом случае вам не нужно for аргумент:

var elemTpl = '<div> ' + 
     '<div class="form-group col-md-{{cols}}" >' + 
     '<label class="control-label input-sm">{{text}}' + 
      '<input type="{{type}}" ng-model="value" name="' + attrs.id + '" id="' + attrs.id + '" class="form-control input-sm szpFocusable" placeholder="{{placeholder}}" ng-required="required" spellcheck="false"/>' + 
     '</label>' + 
     '</div> ' + 
     '</div>'; 

Примечание: Реальный ответ на 2-й комментарий ниже: В директиве содержимое шаблона элемента помещается в тег директивы, в этом случае приводя к тому, что идентификатор используется дважды. Это можно решить, добавив replace : true к возвращаемому значению директивы. Это заменит ваш тег директивы содержимым вашего шаблона.

app.directive('myDirective', function() { 
    return { 
     replace: 'true', 
     template: templateThatUsesId 
    }; 
}); 

Answer 2

Ярлык работает на идентификатор, а не для имени

<label for="idxyz" class="control-label input-sm">{{text}}</label> 
<input id="idxyz" type="{{type}}" ng-model="value" ..... 

Это всегда работает для меня!

Answer 3

Здесь есть более точный ответ: Attribute of label not working in angular directive?

При рендеринге директивы с шаблонами контейнер имеет тот же идентификатор, чем флажок:

<div class="color-warning checkbox ng-isolate-scope ng-valid" ng-model="ckeck4" id="kitten> 
<input id="kitten" type="checkbox"> 
<label for="kitten">CUSTOM LABEL</label> 
</div> 

ДИВ что упаковщики обработанную директивы и флажок имеют одинаковый идентификатор, не совсем хорошо.

Для того, чтобы удалить его, мы используем функцию ссылки:

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

Это происходит потому, что функция ссылки выполняется перед Угловые делает директиву, поэтому мы removin идентификатора из DIV, что упаковщики директивы , здесь мой полный код:

(function() { 
    'use strict'; 
    angular.module('planetCheckbox', []) 
    .controller('PlanetCheckboxController', PlanetCheckboxController) 
    .directive('checkbox', DirectiveCheckbox); 

    function DirectiveCheckbox() { 
     return { 
      restrict: 'E', 
      replace: true, 
      scope: { 
       ngModel: '=', 
       classes: '@class', 
       customLabel: '@', 
       check: '=', 
       id:'@'//, 
       //radio :'@' 
      }, 
      link: function(scope,el,attrs){ 
       el.removeAttr("id") 
      }, 
      controller: 'PlanetCheckboxController', 
      templateUrl: 'planet-checkbox/template.html' 
     } 
    }; 

    PlanetCheckboxController.$inject = ['$scope']; 
    function PlanetCheckboxController($scope) { 
     $scope.ngModel = $scope.check; 
    }; 

    angular.module('planetCheckbox') 
     .run(['$templateCache', function ($templateCache) { 
     $templateCache.put('planet-checkbox/template.html', '<div class="checkbox">'+ 

      '<input id="{{id}}" type="checkbox" />' + 
      '<label for="{{id}}">CUSTOM LABEL</label>' + 
     '</div>' 



     ); 
    }]); 
})(); 

живой пример здесь: http://jsfiddle.net/cherniv/5u4Xp/