CODEWITHSUNDEEP
angularjsangularjs-directive
user1563700
user1563700

Reputation:

Angular shows only one custom element

I try to create custom html form elements with angular.js. The idea is that I have one maintemplate for the formfield-layout and paste in the template needed for textfield, datefield or whatever.

var app = angular.module("myApp", []);
app.controller("MainCtrl", function ($scope) {
    $scope.window = window;
});

// create general formfield-layout
function buildFormTemplate(innerTemplate) {
    var t = '<div class="control-group">'
    + '<label class="control-label" for="{{x.id}}">{{x.label}}';
    t += '<span ng-show="x.required" class="required">*</span>',
    t += '</label><div class="controlls">';
    t += innerTemplate;
    t += '</div>';
    t += '</div>';
    return t;
}

app.directive("textfield", function() {
    return {
        restrict: "E",
        scope: {},
        replace: true,
        template: buildFormTemplate('<input id="{{x.id}}" type="text" name="{{x.name}}" value="{{x.value}}" />'),
        link: function(scope, elm, attrs) {
            scope.x = attrs;
        }
     };
});

This code works like I expect, but if I have multiple textfield-elements only one is rendered. The other textfield-elements are gone.

<textfield id="myLabel" label="label1" name="mytext1" value="with label"/>
<textfield id="anotherOne" label="label2" name="mytext2" value=""/>

renders

<div class="control-group" id="myLabel" label="label1" name="mytext1" value="with label">
    <label class="control-label ng-binding" for="myLabel">
    label1<span ng-show="x.required" class="required" style="display: none;">*</span></label>
    <div class="controlls">
        <input id="myLabel" type="text" name="mytext1" value="with label">
    </div>
</div>

The second textfield is gone. What am I missing?

Upvotes: 0

Views: 167

Answers (1)

charlietfl
charlietfl

Reputation: 171700

Close the tags and it works fine

<textfield id="anotherOne" label="label2" name="mytext2" value=""></textfield>

DEMO: http://plnkr.co/edit/ky0Tpt8qudSLSGho2QAk?p=preview

Upvotes: 2

Related Questions