指令的未知提供者

Question

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

这里是指令代码：

"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 <- FlashMessages

'use strict';

var kingaFrontend = angular.module('kingaFrontend', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngResource', 'ui.router',  'kingaApi'])
kingaFrontend.config(function ($httpProvider, $stateProvider, $urlRouterProvider, $locationProvider) {
    $stateProvider
      .state('home', {
        url: '/',
        templateUrl: 'app/featured/featured.html',
        controller: 'FeaturedCtrl',
        authenticate: false
      })
      .state('admin', {
        url: '/admin',
        templateUrl: 'app/login/login.html',
        controller: 'LoginCtrl',
        authenticate: false
      })
      .state('editProject', {
        url: '/edit_project',
        templateUrl: 'app/edit_project/edit_project.html',
        controller: 'EditCtrl',
        authenticate: true
      });


    $urlRouterProvider.otherwise('/');

    $httpProvider.defaults.headers.common.Authorization = localStorage.getItem('auth_token');
});

kingaFrontend.run(function($rootScope, $state, FlashMessages){

  $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
    if(toState.authenticate && !localStorage.getItem('auth_token')) {
        $state.go('admin');
    }
  });

  FlashMessages.dismissAll();

});

如您所见，我试图在运行函数中注入 FlashMessages，但它抛出了一个错误。

我正在加载此订单中的文件：

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

Answer 1

你不能向事物中注入指令。他们不是 AngularJS 提供者。

你不能在控制器中那样使用 'FlashMessage'。我想也许您需要服务？

Answer 2

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

如您所定义，FlashMessages 是一个指令。来自 AngularJS 文档：

Directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

所以要使用您定义的 FlashMessages，它将是：

<flash-messages></flash-messages>

如果您还尝试创建一个服务来管理应用程序中的即时消息，则需要定义它及其功能：

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

然后可以将此工厂服务注入到应用程序的任何位置，包括指令、控制器和运行块。另外，请确保在 html.

中引用 flashMessagesFactory.js

指令的未知提供者

unknown provider for directive

angularjs

angularjs-directive