未知提供者:bProvider< - b

时间:2014-07-07 08:32:22

标签: angularjs angularjs-directive angularjs-controller

我有一个带有指令和控制器的AngularJS项目。过了一会儿,当我试图运行它时出现了这个错误:

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

我搜索了它,找不到任何明显的解决方案,有没有人有线索?

这是我的指示:

'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

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。

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:

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

这是我的MainCtrl:

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

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

编辑:使用Alexandre Nucera的答案更新了代码,但我收到同样的错误。

解决

由于一些奇怪的原因,我必须在&#34; uploadDirective&#34;的返回语句中将控制器函数内的$ scope和$ interval参数传递给。

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 个答案:

答案 0 :(得分:2)

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

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

同样在您的指令中,请将此语法用于嵌入式控制器:

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

修改:如果您发现此过程繁琐或无法发现剩余问题,可以使用ngmin

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

编辑2 :由于您在评论中提到了grunt,我假设您使用的是uglify插件。如果你真的找不到问题,你仍然无法在你的grunt文件中禁用修改:

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