javascript - 尝试打开底页时收到 "TypeError: undefined is not a function"-6ren

javascript - 尝试打开底页时收到 "TypeError: undefined is not a function"

转载作者：行者123 更新时间：2023-11-28 07:32:35

嘿伙计们，我已经完全按照演示页面显示的内容进行操作，但是当我尝试打开底部工作表时，我仍然收到此错误。我正在使用 angularjs 1.3.14，并且也尝试过 1.3.6。此外，我已按照入门页面上的说明来包含 Angular Material 及其依赖项。

HTML(master.html 这是包含所有js和css库的母版页)

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.css">
<div ng-controller="MasterCtrl">
<body>
<div class="bottom-sheet-demo inset" layout="column" layout-sm="row" layout-align="center">
    <md-button class="md-primary" ng-click="showGridBottomSheet($event)">
      Show as Grid
    </md-button>
  </div>
  <br/>
  <b layout="row" layout-align="center center" layout-margin>
    {{alert}}
  </b>
  <div ng-view=""></div>
</body>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-aria.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-cookies.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-sanitize.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-messages.min.js"></script>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.js"></script>
<script type="text/javascript" src="/static/javascripts/app.js"></script>
<script type="text/javascript" src="/static/javascripts/controllers.js"></script>

app.js

var app = angular.module('app',['ngMaterial','ngRoute','ngSanitize','ngCookies','ngAnimate']).
 config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.
      when('/', {
        templateUrl: '/static/views/main.html',
        controller: 'IndexCtrl'
      }).
      when('/signin',{
        templateUrl: '/static/views/signin.html',
        controller: 'SignInCtrl'
      }).
      when('/signup',{
        templateUrl: '/static/views/signup.html',
        controller: 'SignUpCtrl'
      }).
      otherwise({
        templateUrl: '/static/views/error.html'
      });
    $locationProvider.html5Mode({
      enabled: true,
      requireBase: false
    });

  }]);

controller.js

angular.module('app').controller('MasterCtrl', [
  '$http',
  '$scope',
  '$location',
  '$rootScope',
  '$timeout',
  '$mdBottomSheet',
  function ($http, $scope, $location, $rootScope, $timeout, $mdBottomSheet) {
      $scope.alert = '';
  $scope.showGridBottomSheet = function($event) {
    $scope.alert = '';
    $mdBottomSheet.show({
      templateUrl: 'bottom-sheet-grid-template.html',
      controller: 'GridBottomSheetCtrl',
      targetEvent: $event
    }).then(function(clickedItem) {
      $scope.alert = clickedItem.name + ' clicked!';
    });
  };
  }
]);
angular.module('app').controller('GridBottomSheetCtrl', [
  '$scope',
  '$mdBottomSheet',
  function ($scope,$mdBottomSheet) {
    $scope.items = [
    { name: 'Hangout', icon: 'hangout' },
    { name: 'Mail', icon: 'mail' },
    { name: 'Message', icon: 'message' },
    { name: 'Copy', icon: 'copy' },
    { name: 'Facebook', icon: 'facebook' },
    { name: 'Twitter', icon: 'twitter' },
  ];
  $scope.listItemClick = function($index) {
    var clickedItem = $scope.items[$index];
    $mdBottomSheet.hide(clickedItem);
  };
  }
]);