无法阅读财产'显示'未定义的$ mdToast

时间:2017-09-02 02:05:04

标签: javascript angularjs angular-material

我真的在努力解决这个问题而且我不知道这件事是什么......

我要省去很多代码,但这基本上是它的主旨......基于Angular material design guidelines这个应该工作。我不能为我的生活找出原因。

当我运行代码时,我只是得到一个错误: TypeError: Cannot read property 'show' of undefined

的index.html:

<!DOCTYPE html>
<html lang="en" ng-app="Main">
<!-- some stuff here -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc4/angular-material.min.css">
</head>

<body ng-controller="MainCtrl as ctrl">
<div ng-click="executeToast()">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-sanitize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc4/angular-material.min.js"></script>
</body>
</html>

控制器:

angular.module('MainController', [
        'MainService',
        'MainDirective',
        'ngMaterial', 
        'ngMessages',
        'ngSanitize'
    ])
    .controller('MainCtrl', [ '$scope', '$sce', '$mdToast', function($scope, Main, $sce, $apply, $rootScope, $mdToast) {
      $scope.executeToast() = function() {
           $mdToast.show($mdToast.simple({
              hideDelay: 3000,
              position: 'top left',
              content: 'testing',
              toastClass: 'success'
            }));
      }
}]);

有任何想法或可能的解决方案吗?谢谢!

1 个答案:

答案 0 :(得分:2)

你在这里犯了几个错误:

1,依赖注入顺序必须相同,检查更多here

2,无需将$apply作为依赖项传递,

试试这个

 .controller('MainCtrl', [ '$scope', '$rootScope', '$mdToast','$sce', function($scope, $rootScope, $mdToast, $sce) {
      $scope.executeToast() = function() {
           $mdToast.show($mdToast.simple({
              hideDelay: 3000,
              position: 'top left',
              content: 'testing',
              toastClass: 'success'
            }));