angularjs – Angular-Strap错误：[$injector：unpr]未知提供者

发布时间：2020-12-17 18:07:50 所属栏目：安全来源：网络整理

导读：我正在学习AngularJs并且有许多新术语或者我开始理解这些术语但是这个我似乎无法弄清楚我做错了什么. 我想要做的就是使用Angular-Strap在我的页面上加载一个日期选择器. http://mgcrea.github.io/angular-strap/##datepickers 我得到的错误,到目前为止还没弄

我正在学习AngularJs并且有许多新术语或者我开始理解这些术语但是这个我似乎无法弄清楚我做错了什么.

我想要做的就是使用Angular-Strap在我的页面上加载一个日期选择器.
http://mgcrea.github.io/angular-strap/##datepickers

我得到的错误,到目前为止还没弄清楚为什么：

Uncaught Error: [$injector:modulerr] Failed to instantiate module
mgcrea.ngStrap due to: Error: [$injector:unpr] Unknown provider:
$datepickerProvider

我的基本理解告诉我Angular正在尝试注入一个依赖于它的模块,但我在文档中找不到$datepickerProvider的内容,我正在使用网站上的示例代码.

Html – 标记

<!DOCTYPE html>
<html lang="en" ng-app="mgcrea.ngStrap">
<head>
...
</head>
<body ng-controller="ZenwireController">
                    <div class="bs-example" style="padding-bottom: 24px;" append-source>
                    <form name="datepickerForm" class="form-inline" role="form">
                        <!-- Basic example -->
                        <div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
                            <label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small></label>
                            <input type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker>
                        </div>
                        <!-- Custom example -->
                        <div class="form-group" ng-class="{'has-error': datepickerForm.date2.$invalid}">
                            <label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as number)</small></label>
                            <input type="text" class="form-control" ng-model="selectedDateAsNumber" data-date-format="yyyy-MM-dd" data-date-type="number" data-min-date="02/10/86" data-max-date="today" data-autoclose="1" name="date2" bs-datepicker>
                        </div>
                        <hr>
                        <!-- Date range example -->
                        <div class="form-group">
                            <label class="control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i> Date range <small>(dynamic)</small></label><br>
                            <div class="form-group" class="col-xs-3">
                                <input type="text" class="form-control" ng-model="fromDate" data-max-date="{{untilDate}}" placeholder="From" bs-datepicker>
                            </div>
                            <div class="form-group" class="col-xs-3">
                                <input type="text" class="form-control" ng-model="untilDate" data-min-date="{{fromDate}}" placeholder="Until" bs-datepicker>
                            </div>
                        </div>
                    </form>
                </div>
         </div>
    </body>
</html>

AngularJs – 代码

var app = angular.module('mgcrea.ngStrap',['ngAnimate','ngSanitize','mgcrea.ngStrap']);

app.controller('ZenwireController',function ($scope) {
});

'use strict';

angular.module('mgcrea.ngStrap')

.config(function ($datepickerProvider) {
    angular.extend($datepickerProvider.defaults,{
        dateFormat: 'dd/MM/yyyy',startWeek: 1,autoClose: true,minDate: "today"
    });
})

.controller('DatepickerController',function ($scope,$http) {

    $scope.selectedDate = new Date();
    $scope.selectedDateAsNumber = Date.UTC(1986,1,22);
    // $scope.fromDate = new Date();
    // $scope.untilDate = new Date();
    $scope.getType = function (key) {
        return Object.prototype.toString.call($scope[key]);
    };

});

我正在加载的脚本是,

bundles.Add(new ScriptBundle("~/bundles/angularjs").Include(
            "~/Scripts/angular.js","~/Scripts/angular-animate.js","~/Scripts/angular-sanitize.js","~/Scripts/angular-strap.min.js","~/Scripts/angular-strap.tpl.min.js","~/Scripts/angular-strap/date-parser.min.js","~/Scripts/angular-strap/tooltip.min.js"));

解决方法

你宣布模块’mgcrea.ngStrap’

在HTML和AngularJS代码中进行更改

HTML标记

<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
...
</head>

角度代码

var app = angular.module('myapp','mgcrea.ngStrap']);
    app.controller('ZenwireController',function ($scope) {
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!