Is there a way to forcibly reload a recursive ng-include in AngularJS?

Question

I'm using a recursive script in my Angular app to output a representation of a bunch of objects.

Problem is, if I change the structure of object dynamically, the view doesn't update. It seems the ng-include doesn't regenerate.

Is there any way to force ng-include in a view to work again from scratch?

If you're changing the objects from outside angular, you might need to explicitly trigger a digest cycle using $timeout or $apply. Did you try that? — doldt
– doldt, Commented Apr 1, 2015 at 7:54
Yes, but get an error that $apply() is already running. It seems that $apply doesn't trigger the ng-include to rerun the recursive script — CodyBugstein
– CodyBugstein, Commented Apr 1, 2015 at 8:03
@IlyaLuzyanin I'm not asking in regard to any specific code, just in general, can you force an ng-include to rerun? — CodyBugstein
– CodyBugstein, Commented Apr 1, 2015 at 10:15

Dennis Schiepers · Accepted Answer · 2015-05-06 10:13:14Z

I had the same problem. Try the ui-if directive, it solved my problem.

app.directive("uiIf", function () {
                return {
                    transclude: 'element',
                    priority: 1000,
                    terminal: true,
                    restrict: 'A',
                    compile: function (element, attr, linker) {
                        return function (scope, iterStartElement, attr) {
                            iterStartElement[0].doNotMove = true;
                            var expression = attr.uiIf;
                            var lastElement;
                            var lastScope;
                            scope.$watch(expression, function (newValue) {
                                if (lastElement) {
                                    lastElement.remove();
                                    lastElement = null;
                                }
                                if (lastScope) {
                                    lastScope.$destroy();
                                    lastScope = null;
                                }
                                if (newValue) {
                                    lastScope = scope.$new();
                                    linker(lastScope, function (clone) {
                                        lastElement = clone;
                                        iterStartElement.after(clone);
                                    });
                                }
                                iterStartElement.parent().trigger("$childrenChanged");
                            });
                        };
                    }
                };
            });

When the value is set to false the element will disappear. On true it will render again.

Collectives™ on Stack Overflow

Is there a way to forcibly reload a recursive ng-include in AngularJS?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related