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中时，一切正常。 id和name属性正确绑定到相应的范围字段。

Answer 1

您确定您使用的ID是唯一的吗？

另一种选择是将<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>';

注意：真正的答案在下面的第二条评论中：在一个指令中，元素模板的内容放在指令标记内，在这种情况下导致id被使用两次。这可以通过将replace : true添加到指令的返回值来解决。这将用你的模板内容替换你的指令标签。

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

Answer 2

这里有一个更准确的答案： Attribute of label not working in angular directive?

使用模板呈现指令时，容器的ID与复选框的ID相同：

<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>

包装渲染指令的div和复选框具有相同的id，不太好。

为了删除它，我们使用链接功能：

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

这是因为链接函数在angular渲染指令之前执行，所以，我们从包装指令的div中删除id，这里有我的完整代码：

(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/

Answer 3

标签适用于ID而非名称

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

它总是对我有用！

不在angularjs指令中工作的标签

3 个答案: