I've got a Angular.js directive I'm writing to reduce some boilerplate with Twitter Bootstrap. So far I've created a form-input element and it displays as expected. However, if I place many of these directives in the same parent element, only the first one actually gets added and shows up.

Can anyone shed some light on why?

My markup:

<form class="form-horizontal" role="form">
        <form-input type="text" target="name1" label="Name1" placeholder="Doug" ng-model="name1"/>
        <form-input type="text" target="name2" label="Name2" placeholder="Frank" ng-model="name2"/>
    </form>

app.js

var app = angular.module('app', ['ui.router']);


app.controller('FormInputController', ['$scope', '$attrs', function($scope, $attrs){
    console.log("Controller");
}]);

app.directive('formInput', function(){
    return {
        restrict: 'E',
        controller: 'FormInputController',
        transclude: true,
        replace: true,
        require: ['^ngModel'],
        template: '<div class="form-group">'
                + '<label for="{{id}}" class="col-sm-2 control-label">{{label}}</label>'
                + '<div class="col-sm-10">'
                  + '<input type="{{type}}" class="form-control" id="{{id}}" placeholder="{{placeholder}}">'
                + '</div>'
              + '</div>',
        scope: {
            id: '@',
            label: '@',
            placeholder: '@',
            type: "@"
        },

        link: function(scope, element, attrs, ctrls) {
            console.log(arguments);
        }
    };
});

As stated above, only the "Doug" input shows up.

I've got a Angular.js directive I'm writing to reduce some boilerplate with Twitter Bootstrap. So far I've created a form-input element and it displays as expected. However, if I place many of these directives in the same parent element, only the first one actually gets added and shows up.

Can anyone shed some light on why?

My markup:

<form class="form-horizontal" role="form">
        <form-input type="text" target="name1" label="Name1" placeholder="Doug" ng-model="name1"/>
        <form-input type="text" target="name2" label="Name2" placeholder="Frank" ng-model="name2"/>
    </form>

app.js

var app = angular.module('app', ['ui.router']);


app.controller('FormInputController', ['$scope', '$attrs', function($scope, $attrs){
    console.log("Controller");
}]);

app.directive('formInput', function(){
    return {
        restrict: 'E',
        controller: 'FormInputController',
        transclude: true,
        replace: true,
        require: ['^ngModel'],
        template: '<div class="form-group">'
                + '<label for="{{id}}" class="col-sm-2 control-label">{{label}}</label>'
                + '<div class="col-sm-10">'
                  + '<input type="{{type}}" class="form-control" id="{{id}}" placeholder="{{placeholder}}">'
                + '</div>'
              + '</div>',
        scope: {
            id: '@',
            label: '@',
            placeholder: '@',
            type: "@"
        },

        link: function(scope, element, attrs, ctrls) {
            console.log(arguments);
        }
    };
});

As stated above, only the "Doug" input shows up.

• javascript
• angularjs
• twitter-bootstrap
• angularjs-directive

• possible duplicate of Angular element directives not displaying when using self-closing tags – naXa stands with Ukraine Commented Jul 30, 2015 at 8:40

1 Answer 1

You can't use "self closing" tags for your directives. If you change your markup as follows it should work:

<form class="form-horizontal" role="form">
    <form-input type="text" target="name1" label="Name1" placeholder="Doug" ng-model="name1"></form-input>
    <form-input type="text" target="name2" label="Name2" placeholder="Frank" ng-model="name2"></form-input>
</form>

Basically, the way that HTML parses <form-input /> is as an open tag without a close tag, so your first directive is started, but never finished, which is why the first one appears to work, but the second one not.

See e.g. this and this for more details.