未知提供者:bProvider <- b

问题描述

我有一个带有指令和控制器的 AngularJS 项目.过了一会儿，当我尝试运行它时出现此错误:

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

错误:[$injector:unpr] 未知提供者:bProvider

我用谷歌搜索了一下，没有找到任何明显的解决方案，有人知道吗?

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

这是我的指令:

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

这是我的 app.js

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: '/'
  });
}]);

这是我的控制器:

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

编辑

这是我的 adminUiApp.directives.navigation.

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

这是我的 AboutCtrl:

Here is my AboutCtrl:

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

这是我的 MainCtrl:

Here is my MainCtrl:

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

我找到了 this 建议的解决方案，但据我所知，我已经做到了.我在这里错过了什么吗?

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

代码已更新为 Alexandre Nucera 的回答，但我遇到了同样的错误.

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

已解决

出于某种奇怪的原因，我不得不在uploadDirective"的返回语句中的控制器函数中传递我的 $scope 和 $interval 参数.

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'
    };

});

推荐答案

您提供的链接给出了正确答案，您刚刚错过了 app.js 中的一个注入依赖项:

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

编辑:如果你觉得这个过程很乏味或者如果你不能发现剩余的问题，你可以使用 ngmin

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

另外，查看官方文档:https://docs.angularjs.org/tutorial/step_05#controller_a-note-on-minification

编辑 2 :既然您在评论中提到了 grunt，我假设您正在使用 uglify 插件.如果你真的找不到问题，你仍然不能在你的 grunt 文件中禁用 mangling:

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']
      }
    }
  }
});

这篇关于未知提供者:bProvider <- b的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！