AngularJS - 手動でインジェクタを使用してサービスを挿入しているときにエラーが発生しました

Question

angular.injectorを手動で使用してダイアログを開くサービスを挿入しようとすると問題が発生します。動的テンプレート。私はコンソールに持って

エラーは以下のとおりです。

1：不明プロバイダ：$ rootElementProvider < - $ rootElement < - $場所< - $ anchorScroll < - ngIncludeDirective < - $場所

2 ：コントローラ 'ngInclude'は、ディレクティブ 'ngInclude'で必要ですが見つかりません！

ここでは、私は理由値、私はまた、URLを構築し、ディレクティブの属性として指定するとtemplateUrl機能からアクセスしようとしたが、この場合にも、それが失敗したplunker demonstrating the problem

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

ですreceiveはコンテンツの名前ではなく、変数の名前です。

angular.injectorを介してサービスを注入しないようにすると、コードは機能しますが、アプリケーションの性質上避けることはできませんが、このエラーの背後にある理由を理解することに興味があります誰かがこの問題にいくらか光を当てるほど親切であれば。あなた、gedContextMenu.jsファイルで

Answer 1

次のようになります。

ここ

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

は右、あなたのディレクティブで「customSvc」サービスにアクセスしたい作業plunker

Answer 2

、次の操作を行いソリューションは、サービスを注入することである、あなたのgedContextMenuメニューディレクティブで

を注入pluginApp

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

注入するサービスcustomSvcを変更

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); 

     } 
     }); 
    } 
    } 
}]);