未知提供商：bProvider＆LT; - B [英] Unknown provider: bProvider <- b

问题描述

我有指令和控制器的，AngularJS项目。过了一会儿，我得到这个错误，当我试图运行它：

错误：[$喷油器：unpr]未知提供商：bProvider＆LT; - B

我GOOGLE了它，但没有找到任何明显的解决方案，没有任何人有一个线索？

下面是我的指令：

 使用严格的;
 无功指令= angular.module（'adminUiApp.directives.upload'，[]）; directives.directive（'uploadDirective'，['$区间'，函数（$间隔）{    返回{
       限制：'A'，
       更换：假的，
       templateUrl：查看/上载directive.html'，
       控制器：函数（$范围）{
       //一些code
       }，
       controllerAs：UploadCtrl
   }; }]）;
 directives.directive（'uploadFileDirective'，['$解析，$超时'，函数（$解析，$超时）{
返回功能（范围，ELEM，ATTR）{
    变种FN = $解析（ATTR ['ngFileSelect']）;
    elem.bind（'变'，函数（EVT）{
    }）;
 };
}]）;
directives.directive（'customPopover'，函数（）{
返回{
    限制：'A'，
    模板：'＆LT;跨度类=glyphicon glyphicon-信息符号＆GT;＆LT; / SPAN＆GT;，
    链接：功能（范围，EL，ATTRS）{
            scope.label = attrs.popoverLabel;
            $（EL）.popover（{
                触发：悬停，
                HTML：真实，
                内容：attrs.popoverHtml，
                位置：attrs.popoverPlacement
            }）;
    }
};
}）;
 

下面是我的app.js

 角
.module（'adminUiApp'，[
ngAnimate'，
ngCookies'，
ngResource'，
ngRoute'，
ngSanitize'，
ngTouch'，
adminUiApp.directives.upload'，
adminUiApp.directives.navigation'，
angularFileUpload
]）
的.config（['$ routeProivder'，函数（$ routeProvider）{
  $ routeProvider
  。什么时候（'/'， {
    templateUrl：意见/ main.html中，
    控制器：'MainCtrl
  }）
  。当（'/约'，{
    templateUrl：意见/ about.html'，
    控制器：'AboutCtrl
  }）
  。当（'/上传'，{
      templateUrl：意见/ upload.html'，
      控制器：'UploadCtrl
  }）
  。除此以外（{
    redirectTo：'/'
  }）;
}]）;
 

下面是我的控制器：

  angular.module（'adminUiApp'）
 .controller（'UploadCtrl'，['$范围，$上传'，'$超时，$ HTTP，$间隔功能（$范围，$上传，$超时，$ HTTP，$间隔）{
 //一些逻辑
  }]）;
 

修改

下面是我的adminUiApp.directives.navigation。

  VAR指令= angular.module（'adminUiApp.directives.navigation'，[]）;directives.directive（'navDirective'，函数（）{
    返回{
        限制：'E'，
        templateUrl：意见/ NAV-directive.html'，
        控制器：函数（$范围）{
        //一些code
    }，
    controllerAs：'标签'
};
}）;
 

下面是我的AboutCtrl：

  angular.module（'adminUiApp'）
.controller（'AboutCtrl'，['$范围'，函数（$范围）{
$ scope.awesomeThings = [
  HTML5样板，
  AngularJS'，
  因果报应
];
}]）;
 

下面是我的MainCtrl：

  angular.module（'adminUiApp'）
.controller（'MainCtrl'，['$范围'，函数（$范围）{
$ scope.awesomeThings = [
  HTML5样板，
  AngularJS'，
  因果报应
];
}]）;
 

我发现此内容提出的解决方案，但据我可以看到我已经做到了。我错过了一些东西在这里？

编辑：code。与亚历山大Nucera的回答更新，但我得到了同样的错误。

。

解决

有关一些奇怪的原因，我不得不通过我的$范围和$间隔参数控制器的功能在里面return语句为uploadDirective。

  VAR指令= angular.module（'adminUiApp.directives.upload'，[]）;directives.directive（'uploadDirective'，函数（）{    返回{
        限制：'A'，
        更换：假的，
        templateUrl：查看/上载directive.html'，
        控制器：['$范围，$区间'，函数（$范围，$间隔）{
        //逻辑code
        }]，
        controllerAs：uploadCtrl
    };}）;
 

解决方案

您提供的链接给出了正确的答案，你只是错过在app.js注射一次依赖性：

 配置（['$ routeProvider'，函数（$ routeProvider）{
 ...
}]）;
 

另外，在您的指令，使用此语法您的嵌入式控制器：

 控制器：'$范围'，函数（$范围）{
        //一些code
    }]
 

修改：如果你发现这个过程繁琐，或者如果您不能当场遗留的问题，你可以使用的 ngmin

此外，检查出的官方文档： https：//开头的文档。 angularjs.org/tutorial/step_05#controller_a-note-on-minification

编辑2 ：既然你在评论中提及的呼噜声我假设你使用的是丑化插件。如果你实在找不到问题，您仍无法禁用你的呼噜声文件是混淆：

  //项目配置。
grunt.initConfig（{
  丑化：{
    选项​​：{
      轧：假的
    }，
    my_target：{
      文件：{
        DEST / output.min.js'：'SRC / input.js']
      }
    }
  }
}）;
 

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

});

解决方案

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

这篇关于未知提供商：bProvider＆LT; - B的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！