1

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.

David Welch
  • 1,941
  • 3
  • 26
  • 34
  • possible duplicate of [Angular element directives not displaying when using self-closing tags](http://stackoverflow.com/questions/18103183/angular-element-directives-not-displaying-when-using-self-closing-tags) – naXa stands with Ukraine Jul 30 '15 at 08:40

1 Answers1

11

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.

Community
  • 1
  • 1
kong
  • 1,961
  • 16
  • 16