AngularJS and generated elements

Question

We have some third party javascript components that are generating some html elements. I'd like to couple it with AngularJS.

I've tried this code

<div ng-controller="ExpensesCtrl">
    <form id="expensesform">
        <input type="text" ng-model="expense.name" />
        <input type="text" ng-model="expense.amount" />
    </form>
    <button ng-click="add()">Add</button>expense | json
</div>

function ExpensesCtrl($scope) {

    $scope.expense = {};
    $scope.add = function () {
        $("#expensesform").append("<input type='text' ng-model='expense.age' />");
    };
}

http://jsfiddle.net/tChNh/

but it doesn't work like excepted.

Is there any chance to get this working ?

First off, your jsfiddle is giving errors. Try this: jsfiddle.net/wXZL7 second, what are you trying to do? In angular, you generally don't want to be manipulating the DOM inside your controller, but want to create a directive to do that. — Andrew Joslin
– Andrew Joslin, Commented Jun 2, 2012 at 2:25
Hi Andy. As I said we are using javascripts components for generating our forms. The add method is just simulating this behavior. The point is that dynamicly generated elemnts do not play well with anglurjs. I was just wondering if is there any chance to get it working in my scenario. — user49126
– user49126, Commented Jun 2, 2012 at 12:16
So for this particular scenario, you'd want to do something like this: jsfiddle.net/wXZL7/1. Inject the $compile service. Could you give an example of a real use case? It's hard to know how to handle it — Andrew Joslin
– Andrew Joslin, Commented Jun 2, 2012 at 17:33
Well, this is what I was looking for. Thank you. Make it an answer an I will accept it. — user49126
– user49126, Commented Jun 4, 2012 at 11:36
But this is the absolute wrong way to do it with Angular. You want to create a directive... I will put it up anyway I guess.. — Andrew Joslin
– Andrew Joslin, Commented Jun 4, 2012 at 13:55

Andrew Joslin · Accepted Answer · 2012-06-04 13:56:53Z

13

This is the wrong way to do it, but for this particular scenario you'd want to do something like this: http://jsfiddle.net/wXZL7/1. Inject the $compile service.

Again, this isn't the right way to do it with Angular. Angular's thing is 'You don't have to mess with the DOM in your controller, let the HTML and directives do that'.

You want to create a directive to wrap whatever is generating your elements and let that do it. Read the directives guide for examples: http://docs.angularjs.org/guide/directive

answered Jun 4, 2012 at 13:56

Andrew Joslin

43k21 gold badges102 silver badges75 bronze badges

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

2 Comments

user49126 Over a year ago

I see, I should wrap the js component calls into an angular directive, right ?

Andrew Joslin Over a year ago

Yeah, sounds like that's the way to go.

Luke · Accepted Answer · 2012-09-18 22:41:28Z

1

The angular way, to have your model perfectly synced, and to dynamically add or remove input types would be with http://jsfiddle.net/3BVMm/1/

you should provide the plugin we are talking about here, maybe angular blows this plugin away with just a few codes...

answered Sep 18, 2012 at 22:41

Luke

8,4173 gold badges24 silver badges36 bronze badges

1 Comment

poshaughnessy Over a year ago

The Fiddle didn't work for me due to a few different things. I made an update, in case it helps anyone: jsfiddle.net/J8qvP

Community · Accepted Answer · 2017-05-23 12:23:21Z

0

I have found this answer: Compiling dynamic HTML strings from database

Maybe it helps others. It describes how to use the $compile service to get Angular to know about the knew Code.

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Oct 22, 2013 at 15:22

stollr

7,3495 gold badges48 silver badges64 bronze badges

Collectives™ on Stack Overflow

AngularJS and generated elements

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related