Angular issue with nested ng-include

Question

I encounter an issue 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 have to inject the $rootElementProvider somewhere in the compile flow but I do not know how.

Here is a Plunker of my issue: http://plnkr.co/edit/K8iayGXGLx5QwHNNiLZ1?p=preview

All the code is needed, and I can not use directives nor controllers, the templates also need to be cached like this. Furthermore, If someone also know how to get rid of the $timeout service to get through the$digest already running I will be really thankful.

Did you find a solution to your problem ? I am in the same situation — RPDeshaies, Mar 06 '15 at 01:46

score 0 · Accepted Answer · edited May 23 '17 at 12:15

Since you're manually creating $injector you need to somehow tell it where to get $rootElement from. One way to do it is through inline module definition:

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've updated your plunker accordingly.

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

Prevent error $digest already in progress when calling $scope.$apply().

In short you can do a simple check (which does not mean you should):

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

Please refer to linked answer for more details.

Angular issue with nested ng-include

1 Answers1