How to bind dynamically generated elements in Angular.js?

Question

I'm getting started with Angular.js directives, so I'm dynamically generating DOM with custom directives.

The simplified version of my directive is:

angular.module('app', [])
  .controller('Controller', ['$scope',
    function($scope) {
      $scope.name = "André Pena";
      $scope.email = "[email protected]"
    }
  ])
  .directive('gText', function() {
    return {
      restrict: 'E',
      link: function(scope, element, attrs) {
        //input
        var input = angular.element("<input/>");
        input.attr("type", "text");
        input.addClass("form-control");
        input.attr("placeholder", attrs.placeholder);
        input.attr("name", attrs.property);
        element.append(input);
      }
    };
  });

And a simple use of this directive is:

<g-text label="E-mail" property="email" placeholder="Enter some e-mail"></g-text>

As you can see, I'm creating an input tag dynamically using an Angular.js element. I want to bind the value of this element with the property specified in the property attribute. In this case, I want the value of the input to be the email scope property ([email protected]).

How to achieve that?

I think this may be helpful [Try this][1] [1]: stackoverflow.com/questions/19867554/… — Jack Adam
– Jack Adam, Commented Jul 12, 2014 at 6:13

glepretre · Accepted Answer · 2014-07-16 08:06:54Z

0

When you create a dynamic element, you have to compile it into the directive. For that, you have to use $compile function of angular. I've done it for you.

have a look here : http://jsfiddle.net/3hJmz/1/

var app = angular.module('app', []);
app.controller('Controller', ['$scope',

function ($scope) {
    $scope.name = "André Pena";
    $scope.email = "[email protected]";
    console.log($scope.email);
}]);
app.directive('gText', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            info: "=property"
        },

        link: function (scope, element, attrs) {

            var input = angular.element("<input/>");
            input.attr("type", "text");
            input.attr("placeholder", attrs.placeholder);
            input.attr("value", scope.info);

            var linkFn = $compile(input);
            var content = linkFn(scope);
            element.append(content);
        }
    };
});

any more concern, revert back.

edited Jul 16, 2014 at 8:06

glepretre

8,1675 gold badges47 silver badges58 bronze badges

answered Jul 12, 2014 at 6:50

micronyks

55.7k17 gold badges122 silver badges166 bronze badges

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

4 Comments

Andre Pena Over a year ago

I appreciate your answer, but for some reason, even though the e-mail address get's property displayed, when I alter the e-mail in the textbox, it's not two-way binding. Do you know how can I fix that?

micronyks Over a year ago

two way binding in which sense? please elaborate for this particular example.

micronyks Over a year ago

And if you are satisfied with given answer, please mark it as selected/answered. so other people can refer to it.

Andre Pena Over a year ago

The problem is that when you change the email through the input, it's not updating the email property in the model. See an example: jsfiddle.net/f8kRD. When you edit the textbox, the e-mail outside it should update too.

Collectives™ on Stack Overflow

How to bind dynamically generated elements in Angular.js?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related