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＆lt; - 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();

});

正如您所看到的，我正在尝试在run函数中注入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文档：

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

因此，要使用FlashMessages，因为您已定义它，它将是：

<flash-messages></flash-messages>

如果您还尝试创建可以管理应用中的Flash消息的服务，则需要定义它及其功能：

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

然后，可以在您的应用程序的任何位置注入此工厂服务，包括您的指令，控制器和运行块。另外，请务必在html中引用flashMessagesFactory.js。

未知的指令提供者

2 个答案: