angular, in directive, adding to the template an element with ng model

Question

I'm trying to add an input element with ng-model inside a directive.

the link function of my directive:

link: function (scope, element, attrs) {
        var elem_0 = angular.element(element.children()[0]);
        for (var i in scope.animals[0]) {
            elem_0.append(angular.element('<span>' + scope.animals[0][i].id + '</span>'));

            //this part doesn't work
            var a_input = angular.element('<input type="text">');
            a_input.attr('ng-model', 'animals[0][' + i + '].name');
            //end
            elem_0.append(a_input);
        }

it seems i need to call $compile() at the end, but have no idea how.

mikemaccana · Accepted Answer · 2013-07-17 11:02:09Z

12

Try

var a_input = angular.element($compile('<input type="text" ng-model="animals[0][' + i + '].name"/>')($scope))
elem_0.append(a_input);

edited Jul 17, 2013 at 11:02

mikemaccana

126k113 gold badges442 silver badges544 bronze badges

answered Mar 26, 2013 at 9:49

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charlietfl · Accepted Answer · 2013-03-26 11:51:38Z

5

You are making directive more complicated than necessary by manually looping over arrays when you could use nested ng-repeat in the directive template and let angular do the array loops:

angular.module("myApp", [])
    .directive("myDirective", function () {
    return {
        restrict: 'EA',       
        replace: true,
        scope: {
            animals: '=animals'
        },
        template: '<div ng-repeat="group in animals">'+
                       '<span ng-repeat="animal in group">{{animal.id}}'+
                             '<input type="text" ng-model="animal.name"/>'+
                        '</span><hr>'+
                   '</div>'

    }
});

DEMO: http://jsfiddle.net/Ajsy7/2/

answered Mar 26, 2013 at 11:51

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

angular, in directive, adding to the template an element with ng model

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related