CODEWITHSUNDEEP
angularjsangularjs-directive
lipenco
lipenco

Reputation: 1368

unknown provider for directive

I am trying to add directive to my project.

here is directive code:

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

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

and controller for this directive:

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

when i'm trying to use FlashMessages in index.js I am getting the error: Uncaught Error: [$injector:unpr] Unknown provider: 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();

});

As you can see I am trying to inject FlashMessages in run function, but it throws an error.

I am loading the files in this 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>

Upvotes: 0

Views: 772

Answers (2)

micjamking
micjamking

Reputation: 2213

As @PeterAshwell indicated, I think you may have confused directives and providers (eg. services, factories, etc.).

As you've defined it, FlashMessages is a directive. From the AngularJS docs:

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.

So to use FlashMessages as you've defined it, it would be:

<flash-messages></flash-messages>

If you are also trying to create a service that can manage the flash messages across your app, you need to define it and it's functionality:

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

And then this factory service can be injected anywhere across your app, including your directive, controller, and run block. Also, make sure to reference flashMessagesFactory.js in your html.

Upvotes: 1

Peter Ashwell
Peter Ashwell

Reputation: 4302

You can't inject directives into things. They are not AngularJS providers.

You cannot use 'FlashMessage' in the controller like that. I think maybe you want a service instead?

Upvotes: 1

Related Questions