Unknown provider: bProvider <- b

丶灬走出姿态 提交于 2019-12-11 11:43:34

问题


I have an AngularJS project with Directives and Controllers. After a while i got this error when I tried to run it:

Error: [$injector:unpr] Unknown provider: bProvider <- b

I have googled it and could not find any obvious solution, does anyone have a clue?

Here is my directive:

'use strict';
 var directives = angular.module('adminUiApp.directives.upload', []);

 directives.directive('uploadDirective',['$interval', function($interval) {

    return {
       restrict: 'A',
       replace: false,
       templateUrl: 'views/upload-directive.html',
       controller: function($scope) {
       //some code
       },
       controllerAs: 'UploadCtrl'
   };

 }]);
 directives.directive('uploadFileDirective', [ '$parse', '$timeout', function($parse, $timeout) {
return function(scope, elem, attr) {
    var fn = $parse(attr['ngFileSelect']);
    elem.bind('change', function(evt) {
    });
 };
}]);
directives.directive('customPopover', function(){
return {
    restrict: 'A',
    template:'<span class="glyphicon glyphicon-info-sign"></span>',
    link: function (scope, el, attrs) {
            scope.label =attrs.popoverLabel;
            $(el).popover({
                trigger: 'hover',
                html:true,
                content: attrs.popoverHtml,
                placement: attrs.popoverPlacement
            });
    }
};
});

Here is my app.js

angular
.module('adminUiApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'adminUiApp.directives.upload',
'adminUiApp.directives.navigation',
'angularFileUpload'
])
.config(['$routeProivder', function ($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/about', {
    templateUrl: 'views/about.html',
    controller: 'AboutCtrl'
  })
  .when('/upload', {
      templateUrl: 'views/upload.html',
      controller: 'UploadCtrl'
  })
  .otherwise({
    redirectTo: '/'
  });
}]);

Here is my controller:

 angular.module('adminUiApp')
 .controller('UploadCtrl', ['$scope', '$upload', '$timeout', '$http','$interval' function ($scope, $upload, $timeout, $http, $interval) {
 //Some logic
  }]);

EDIT

Here is my adminUiApp.directives.navigation.

var directives = angular.module('adminUiApp.directives.navigation', []);

directives.directive('navDirective', function() {
    return {
        restrict: 'E',
        templateUrl: 'views/nav-directive.html',
        controller: function($scope) {
        //some code
    },
    controllerAs: 'tab'
};
});

Here is my AboutCtrl:

angular.module('adminUiApp')
.controller('AboutCtrl',['$scope', function ($scope) {
$scope.awesomeThings = [
  'HTML5 Boilerplate',
  'AngularJS',
  'Karma'
];
}]);

Here is my MainCtrl:

angular.module('adminUiApp')
.controller('MainCtrl',['$scope', function ($scope) {
$scope.awesomeThings = [
  'HTML5 Boilerplate',
  'AngularJS',
  'Karma'
];
}]);

I found this proposed solution but as far as I could see I have already done that. Have I missed something here?

Edit: Code updated with Alexandre Nucera's answer, but I'm getting the same error.

SOLVED

For some odd reason I had to pass my $scope and $interval parameters inside the controller function in the return statement for the "uploadDirective".

var directives = angular.module('adminUiApp.directives.upload', []);

directives.directive('uploadDirective', function() {

    return {
        restrict: 'A',
        replace: false,
        templateUrl: 'views/upload-directive.html',
        controller:['$scope', '$interval', function($scope, $interval) {
        //logic code
        }],
        controllerAs: 'uploadCtrl'
    };

});

回答1:


The link you provided gives the right answer, you've just missed one injection dependency in your app.js :

config(['$routeProvider', function ($routeProvider) {
 ...
}]);

Also in your directive, use this syntax for your embedded controllers :

 controller: ['$scope', function($scope) {
        //some code
    }]

Edit : if you find this process tedious or if you can't spot remaining issues, you can use ngmin

Also, check out the official documentation : https://docs.angularjs.org/tutorial/step_05#controller_a-note-on-minification

Edit 2 : Since you mentioned grunt in your comment I assume that you are using the uglify plugin. If you really can't find the issue, you can't still disable the mangling in your grunt file :

// Project configuration.
grunt.initConfig({
  uglify: {
    options: {
      mangle: false
    },
    my_target: {
      files: {
        'dest/output.min.js': ['src/input.js']
      }
    }
  }
});


来源:https://stackoverflow.com/questions/24606190/unknown-provider-bprovider-b

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!