Angular ng-include issue

Question

I am facing a problem in Angularjs when using nested ng-include with the $compile function. Here is the error:

 Error: [$injector:unpr] Unknown provider: $rootElementProvider <- $rootElement <- $location <- $anchorScroll <- ngIncludeDirective 

I think I need to enter $rootElementProvider somewhere in the compilation stream, but I don't know how to do this.

Here is the plank of my problem: http://plnkr.co/edit/K8iayGXGLx5QwHNNiLZ1?p=preview

All code is necessary, and I cannot use directives or controllers, templates also need to be cached as follows. In addition, if someone knows how to get rid of the $timeout service in order to get through the already running $digest , I will be very grateful.

Answer 1

Since you are manually creating $injector , you need to somehow say where to get $rootElement . One way to do this is to define a built-in module:

 angular.injector(['ng', function($provide){ var $rootElement = angular.element(document.querySelector('body')); $provide.value('$rootElement', $rootElement); }]).invoke(function ($injector){ var localRootElement = $injector.get('$rootElement'); }); 

I updated your plunker accordingly.

As for the way to avoid using $timeout , a detailed answer can be found in:

$ Digest error prevention is already done when calling $ scope. $ apply () .

In short, you can do a simple check (which doesn't mean you should):

 if(!$scope.$$phase) { //$digest or $apply } 

See the related answer for more details.