I have a directive that generates a drag/drop reorderable list with add and remove functionality. If you click in the container, an input is added dynamically, you type in it and when you type a ma, the value you typed is pushed into the list used with ng-repeat to build the list. (Should be kinda familiar to users of this site :) )

This works awesome when the initial object backing it is not null. But when the object begins null and you try to add the first item (by detecting the null and scope.$apply the initialization)the markup is not generated.

Here is a plunk to show what I mean.

In my app, the data is ing from an external source, so I can't ensure non-null lists. How can I get angular to properly respond to the array initialization (and later push)?

I have a directive that generates a drag/drop reorderable list with add and remove functionality. If you click in the container, an input is added dynamically, you type in it and when you type a ma, the value you typed is pushed into the list used with ng-repeat to build the list. (Should be kinda familiar to users of this site :) )

This works awesome when the initial object backing it is not null. But when the object begins null and you try to add the first item (by detecting the null and scope.$apply the initialization)the markup is not generated.

Here is a plunk to show what I mean. http://plnkr.co/edit/Momlgpfy82kHRPwXGR8V?p=preview

In my app, the data is ing from an external source, so I can't ensure non-null lists. How can I get angular to properly respond to the array initialization (and later push)?

• javascript
• angularjs

Share Improve this question Follow asked Apr 8, 2013 at 23:55 µBioµBio 10.8k66 gold badges4040 silver badges5656 bronze badges 4

• Why can't you set the initial list to [] instead of null? – Josh David Miller Commented Apr 9, 2013 at 0:10
• @JoshDavidMiller yes, I actually was already...turned out to be a bug in the way the directive was accessing the list...I actually needed eval("scope." + attrs.draggableList) instead of scope[attrs.draggableList] – µBio Commented Apr 9, 2013 at 0:38
• You definitely don't want to use eval as that's not safe. Try scope.$eval(attrs.draggableList) instead: docs.angularjs/api/ng.$rootScope.Scope. But keep in mind that this isn't a two-way binding and it won't update if you change the list outside the directive. Your directive should use $observe and an isolate scope. – Josh David Miller Commented Apr 9, 2013 at 2:26
• @JoshDavidMiller Thanks for the suggestion, I made the eval change as you suggested and it works for what I need as there shouldn't be any external changes to the list. – µBio Commented Apr 10, 2013 at 19:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

Set list to empty array...whenevr a new item is pushed into array angular listeners will update directive

http://plnkr.co/edit/h3GOpTX6Chh1wjcM9QrV?p=preview