Question

我在尝试手动使用angular.injector注入一个打开对话框的服务时遇到了一个问题，该服务又在其模板中使用了一个使用动态模板的指令。

我在控制台中遇到的错误是：

1：未知提供者：$ rootElementProvider＆lt; - $ rootElement＆lt; - $ location＆lt; - $ anchorScroll＆lt; - ngIncludeDirective＆lt; - $ location

2：无法找到指令'ngInclude'所需的控制器'ngInclude'！

以下是plunker demonstrating the problem

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

我还尝试构建url并将其指定为指令属性并从templateUrl函数访问它，但在这种情况下它也会失败，因为我收到的值只是变量的名称，而不是内容。 / p>

如果我通过angular.injector避免注入服务，代码可以工作，但是由于应用程序的性质我无法避免它，此外，我有兴趣了解这个错误背后的原因是什么，如果有人能够对此事有所了解。

Answer 1

解决方案是以下列方式注入服务：

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

这是工作plunker

Answer 2

在您的gedContextMenu.js文件中，执行以下更改

注入pluginApp

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

在customSvc菜单指令

中注入服务gedContextMenu

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

        }
      });
    }
  }
}]);

AngularJS - 手动使用注入器注入服务时出错

2 个答案: