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.

score 0 · Answer 1 · edited May 23 '17 at 12:32

0

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

edited May 23 '17 at 12:32

Community

1
1

answered Mar 29 '17 at 23:11

Maxime Leprince

156
2

score 0 · Answer 2 · answered Mar 29 '17 at 23:25

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);
}

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 — Raheel Hasan, Mar 29 '17 at 23:28

antonionikolov · Answer 3 · 2017-03-29T23:29:45.207

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 '17 at 23:29

answered Mar 29 '17 at 23:28

antonionikolov

97
1
1
8

The element(s) are created dynamically. its not 1 element – Raheel Hasan Mar 29 '17 at 23:29
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. – antonionikolov Mar 29 '17 at 23:39

score 0 · Accepted Answer · answered Mar 30 '17 at 03:30

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);
}

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

4 Answers4