Angular JS - How to apply / bind ng-model late (lazy)

Question

I have a simple scenario in a large piece of code:

Angular APP & Controller (all working well)
one ng-model element is dynamically created later (or lets say it comes from an ajax call). How to bind this into that controller?

For example:

var dtApp = angular.module('App1', []);
dtApp.controller('Cont1', function($scope)
{
  .
  .
  .
  .
  $scope.xyz='1'; 
}
.
.
.
//element created dynamically on click: 
<input type="text" ng-model="xyz" />
.

This is just an example, but it will solve the actual and larger problem if I know the solution.

Thanks a lot.

Community · Accepted Answer · 2017-05-23 12:32:26Z

0

You need to use $compile. See AngularJS - Dynamically creating elements that specify directives

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Mar 29, 2017 at 23:11

Maxime Leprince

1562 bronze badges

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

Comments

Thai Duong Tran · Accepted Answer · 2017-03-29 23:25:29Z

0

if you want to manually add DOM element to DOM tree of the controller after it finishes binding & compiling phase, you will need to compile and bind the scope of the controller to the new DOM element yourself using $compile service : https://docs.angularjs.org/api/ng/service/$compile

var dtApp = angular.module('App1', []);
dtApp.controller('Cont1', function($scope, $compile)
{
   var parent_element_to_append = angular.element(YOUR_SELECTOR);
   var element = $compile("<input type="text" ng-model="xyz" />")($scope);
   parent_element_to_append.append(element);
}

answered Mar 29, 2017 at 23:25

Thai Duong Tran

2,54214 silver badges15 bronze badges

1 Comment

Raheel Hasan Over a year ago

I like the idea, but there is a huge code (working well) that creates the element(s) and its not inside angular. So thats the problem

antonionikolov · Accepted Answer · 2017-03-29 23:29:45Z

0

Why don't you just play with element visibility instead of generating it ng-show/ng-hide/ng-if. If the request is outside the controller's visibility you can trigger an event and listen to it and then make the element visible. This way the you will have the element from the beginning it just won't be visible but ng-model will bind your property. This won't work only if you don't know what element will be generated (if there are a lot of possibilities), but if there are a small number you can add all of them and only make the one you want visible.

edited Mar 29, 2017 at 23:29

answered Mar 29, 2017 at 23:28

antonionikolov

1071 gold badge1 silver badge10 bronze badges

2 Comments

Raheel Hasan Over a year ago

The element(s) are created dynamically. its not 1 element

antonionikolov Over a year ago

Ok. So your request have the element sent as string? If that is so, instead of generating it outside angular scope, why don't you trigger an angular event which executes the piece of code that Thai suggested you in the answers above? Sorry for that i'm not writing in the Thai's answer, but I don't have reputation to write comments on other users answers.

Raheel Hasan · Accepted Answer · 2017-03-30 03:30:45Z

0

With some help from other posts (and some hints from the other answers), here is the simplest solution:

1. at JS code that triggers new dom element

angular.element(document.getElementById("Cont1")).scope().bindx('new_field_id');

2. inside Controller Cont1

//first add $compile in the function definition, then the following
$scope.bindx = function(ele_id)
{
    ele = $('#'+ele_id).parent();
    $compile(angular.element(ele).contents())($scope);
}

answered Mar 30, 2017 at 3:30

Raheel Hasan

6,0634 gold badges47 silver badges75 bronze badges

Collectives™ on Stack Overflow

Angular JS - How to apply / bind ng-model late (lazy)

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related