AngularJS - 인젝터를 사용하여 수동으로 서비스를 삽입하는 동안 발생하는 오류

Question

angular.injector를 수동으로 사용하여 대화 상자를 여는 서비스를 삽입하려고 할 때 문제가 발생합니다. 대화 상자를 여는 서비스는 해당 템플릿의 지시문을 사용합니다. 동적 템플릿.

내가 콘솔에서이 오류는 다음과 같습니다

1 : 알 수없는 제공 : $ rootElementProvider < - $의 rootElement < - $ 위치 < - $ anchorScroll < - ngIncludeDirective < - $ 위치

2 : 지시어 'ngInclude'에 필요한 컨트롤러 'ngInclude'을 찾을 수 없습니다! 여기

는, I는 URL을 구축 도파 속성으로 지정하고 templateUrl 함수에서 액세스뿐만 아니라 실패이 경우 시도 plunker demonstrating the problem

var customSvc = angular.injector(['ng', 'pluginApp']).get("customSvc"); 
customSvc.testOpenDialog(100, scope); 

인 값 I 때문에 receive는 내용이 아니라 변수의 이름입니다.

angular.injector를 통한 서비스 삽입을 피하면 코드가 작동하지만 응용 프로그램의 특성으로 인해 피할 수 없으며이 오류의 원인이 무엇인지 이해하고 있습니다. , 누군가가 문제에 대해 약간의 빛을 비춰 줄만큼 친절하다면. 할 다음 당신에

Answer 1

이 솔루션에서 서비스를 주입하는 것입니다, 당신의 gedContextMenu 메뉴 지시어에

를 주입 pluginApp

angular.module('gedContextMenuApp', ['ui.bootstrap', 'mgcrea.ngStrap.popover','pluginApp']); 

에게 주입한다 서비스 customSvc 변경 다음과 같은 방법 :

여기

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

는, 당신은 당신의 지시어에 "customSvc"서비스에 액세스 할

Answer 2

, gedContextMenu.js 파일

angular.module('gedContextMenuApp').directive('gedContextMenu',['$log','$templateCache', '$uibModal', 'customSvc', function($log, $templateCache, $uibModal, customSvc) { 
    return { 
    restrict: 'AE', 
    scope: { 
     gedContextData: '=' 
    }, 
    template: "<button class='fa fa-cog' bs-popover data-template='{{popoverTemplate}}' data-auto-close='1' data-placement='bottom' data-animation='am-flip-x'></button>", 
    controller: function($scope) { 
     $scope.popoverTemplate = 'popoverTemplate.html'; 

     $scope.executePlugin = function($event, contextItem) { 
     var propName = contextItem.action; 
     $scope.contextItem = contextItem; 
     $log.info('property name ' + propName + ' used to trigger event ', $event.type); 
     $scope[propName] = $event; 
     } 

     $scope.click = function($event, contextItem) { 
     $scope.executePlugin($event, contextItem); 
     } 
    }, 
    link: function(scope, element, attrs) { 
     scope.$watch('openDialog', function(event) { 
     if (event && event.type === 'click') { 
      console.log(customSvc); 
      // var customSvc = angular.injector(['ng', 'pluginApp']).get("customSvc"); 

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

      // customSvc.testOpenDialog(100, scope); 
      //customSvc.testDirettivaConfirm(100, scope); 

     } 
     }); 
    } 
    } 
}]);