指令的未知提供者

我正在尝试向我的项目添加指令。指令的未知提供者

这里是指令代码：

"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，但它会引发错误。

我加载的文件中的oreder：

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

来源

2015-03-25 lipenco

正如@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(){ ... } 
    } 
});

然后这家工厂服务可以随时随地在您的应用程序被注入，包括你的指令，控制器和运行BLO CK。另外，请确保在您的html中参考flashMessagesFactory.js。

来源

2015-03-25 07:51:43 micjamking

你不能注入指令到的东西。他们不是AngularJS提供商。

您不能在控制器中使用'FlashMessage'。我想也许你想要一个服务呢？

来源

2015-03-25 06:07:35

指令的未知提供者

回答

相关问题