Angularjs 指令的未知提供程序

我正在尝试向我的项目添加指令

以下是指令代码：

"use strict";
var kf = angular.module('kingaFrontend');

kf.directive('FlashMessages', function() {
  return {
    restrict: 'E',
    templateUrl: 'directives/flash-message-container.html',
    controller: 'FlashMessageCtrl'
  };
});

和本指令的控制器：

"use strict";
var kf = angular.module('kingaFrontend');

kf.controller('FlashMessageCtrl', function ($scope, $rootScope, FlashMessages) {
  $scope.FlashMessages = FlashMessages;

  $scope.$watch('FlashMessages.messages', function (newVal, oldVal, scope) {
    if(newVal) {
      scope.messages = newVal;
    }
  });

  $scope.dismissMessage = function(index) {
    FlashMessages.dismiss(index);
  };
});

当我试图在index.js中使用FlashMessages时，我得到了一个错误：

---

未捕获错误：[$injector:unpr]未知提供程序：FlashMessagesProvider您无法将指令注入到对象中。他们不是AngularJS提供者

---

在控制器中不能像那样使用“FlashMessage”。我想也许你想要一项服务？

正如@PeterAshwell所指出的，我认为你可能混淆了指令和提供者（如服务、工厂等）

正如您所定义的，

FlashMessages

是一个指令。从AngularJS文档：

指令是DOM元素（如属性、元素）上的标记 名称、注释或CSS类），告诉AngularJS的HTML编译器 （$compile）将指定的行为附加到该DOM元素，甚至 转换DOM元素及其子元素

因此，要使用您定义的

FlashMessages

，应该是：

<flash-messages></flash-messages>

然后这个工厂服务可以注入到你应用程序的任何地方，包括你的指令、控制器和运行块。另外，确保在html中引用

flashMessagesFactory.js

  <script src="app/modules/kinga-api/kinga-api.js"></script>
    <script src="app/modules/kinga-api/user.js"></script>
    <script src="app/modules/kinga-api/project.js"></script>
    <script src="app/modules/kinga-api/http.js"></script>
    <script src="app/index.js"></script>
    <script src="app/main/main.controller.js"></script>
    <script src="app/login/login.controller.js"></script>
    <script src="app/featured/featured.controller.js"></script>
    <script src="app/edit_project/edit.controller.js"></script>
    <script src="app/directives/flash-message.directive.js"></script>
    <script src="app/directives/flash-message.controller.js"></script>
    <script src="components/navbar/navbar.controller.js"></script>
    <script src="app/contact/contact.controller.js"></script>
    <script src="app/config/config.js"></script>

<flash-messages></flash-messages>

kf.factory('flashMessagesFactory', function() {
  return {
    messages: [], // or {}, depending on your code
    dismiss: function(index){ ... },
    dismissAll: function(){ ... }
  }
});