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 = "andrerpena@gmail.com"
    }
  ])
  .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 (andrerpena@gmail.com).

How to achieve that?

I think this may be helpful [Try this][1] [1]: http://stackoverflow.com/questions/19867554/bind-angularjs-to-newly-created-html-element-dynamically — Jack Adam, Jul 12 '14 at 06:13

score 0 · Answer 1 · edited Jul 16 '14 at 08:06

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 = "andrerpena@gmail.com";
    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 '14 at 08:06

glepretre

8,154
5
43
57

answered Jul 12 '14 at 06:50

micronyks

54,797
15
112
146

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? – Andre Pena Jul 12 '14 at 13:21
two way binding in which sense? please elaborate for this particular example. – micronyks Jul 12 '14 at 13:29
And if you are satisfied with given answer, please mark it as selected/answered. so other people can refer to it. – micronyks Jul 12 '14 at 13:30
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: http://jsfiddle.net/f8kRD/. When you edit the textbox, the e-mail outside it should update too. – Andre Pena Jul 13 '14 at 18:18

How to bind dynamically generated elements in Angular.js?

1 Answers1