使用Angular材料Bottom Sheet控件时遇到问题

时间:2015-11-12 15:00:07

标签: javascript html angularjs

试图让角度材质库适用于底部纸张控件。我按照他们说的示例,将$ mdBottomSheet依赖项放在我的控制器注入中,但似乎组件找不到它需要的东西。我得到的错误是

  

在第41栏第4146行引发了例外情况   http://localhost:58270/Scripts/angular.js 0x800a139e - JavaScript   运行时错误:[$ injector:unpr]未知提供者:   $ mdBottomSheetProvider< - $ mdBottomSheet< - SEFlexJobsController

我的控制器

app.controller("SEFlexJobsController", ["$scope", "$http", "$modal", "$log", "$element", "$rootScope", "AlertsService", "AuthService", "SEJobService", "$interval", "$mdBottomSheet", function ($scope, $http, $modal, $log, $element, $rootScope, AlertsService, AuthService, SEJobService, $interval, $mdBottomSheet) {
    $rootScope.closeAlert = AlertsService.closeAlert;
    $scope.AuthService = AuthService;
    $scope.SEJobService = SEJobService;
    $scope.disableControls = false;
    $scope.isBusy = false;
    $scope.totalItems = 0;
    $scope.currentPage = 1;
    $scope.recordsPerPage = 10;
    $scope.fetchingData = false;
    $scope.tableStateRef = null;
    $scope.showListBottomSheet = function ($event) {
        $scope.alert = '';
        $mdBottomSheet.show({
            templateUrl: 'bottom-sheet-list-template.html',
            controller: 'ListBottomSheetCtrl',
            targetEvent: $event
        }).then(function (clickedItem) {
            $scope.alert = clickedItem['name'] + ' clicked!';
        });
    };
}
]);

我在BundleConfig

中包含以下内容
  bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/font-awesome.min.css",
                      "~/Scripts/angular-loading/loading-bar.css",
                      "~/Scripts/nya-bs-select/nya-bs-select.min.css",
                      "~/Content/angular-ui-switch.css",
                      "~/Content/angular-material.min.css",
                      "~/Content/site.css"));

            bundles.Add(new ScriptBundle("~/bundles/angular")
                .Include("~/Scripts/angular.js",
                    "~/Scripts/angular-route.js",
                    "~/Scripts/angular-ui/ui-bootstrap-tpls.js",
                    "~/Scripts/AngularApp/app.js",
                    "~/Scripts/angular.animate.js",
                    "~/Scripts/angular.aria.js",
                    "~/Scripts/angular.material.js")
                .IncludeDirectory("~/app", "*.js", true)
                .Include("~/Scripts/smart-table/smart-table.js",
                "~/Scripts/angular-loading/loading-bar.js",
                "~/Scripts/nya-bs-select/nya-bs-select.min.js",
                "~/Scripts/moment.js"));

我没有的例子中唯一的一个是模块,因为我没有使用模块

在网站https://material.angularjs.org/latest/demo/bottomSheet

上的示例中
angular.module('bottomSheetDemo1', ['ngMaterial'])

所以我不在任何地方都包含ngMaterial。我可以将它与$ mdBottomSheet一起放在我的构造函数中吗?我在我的ng-app include级别尝试了它但是找不到ngMaterial

下面的app模块

var app = angular.module('PortalXApp', ["ngRoute", "ui.bootstrap", "ui.bootstrap.showErrors", "smart-table", "angular-loading-bar", "nya.bootstrap.select", "uiSwitch"]);

app.constant('USER_ROLES', {
    jobMasterDelete: "jobMasterDelete",
    jobMasterEdit: "jobMasterEdit",
    jobMasterView: "jobMasterView",

    jobTemplateDelete: "jobTemplateDelete",
    jobTemplateEdit: "jobTemplateEdit",
    jobTemplateRun: "jobTemplateRun",
    jobTemplateView: "jobTemplateView"
});

app.config(['$httpProvider', function ($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};
    }
    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

0 个答案:

没有答案