直升机， 我是AngularJS的新手，我刚开始使用$ mdToast基本函数Show（）。这是我对这个问题的完整代码，希望你能帮助我。
'use strict';
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngAnimate', 'ui.bootstrap', 'ngCookies',
'ngRoute', 'ngMaterial', 'ngAria', 'ngMessages',
'myApp.view0',
'myApp.view1',
'myApp.view2',
'myApp.version',
'myApp.view3',
'myApp.view4',
'myApp.view5',
'myApp.view6'
])
.run(function ($rootScope, $cookies, $http) {
$rootScope.loggedin = false;
$rootScope.loggedinUser = {};
var loginCredentials = $cookies.get('logincredentials');
$http.get('https://localhost:8181/WebApplicationStom/webresources/domain.login', {headers: {
Authorization: loginCredentials
}}).success(function (data) {
if (data.ime == '123') {
$rootScope.loggedinUser = data;
$rootScope.loggedin = true;
} else {
$rootScope.loggedin = false;
$rootScope.loggedinUser = {};
}
});
})
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view0'});
}])
.controller('LoginCtrl', ['$scope', '$uibModal', '$log', '$rootScope', '$http', '$cookies', '$mdToast', function ($scope, $uibModal, $log, $rootScope, $http, $cookies, $mdToast) {
$scope.animationsEnabled = true;
$scope.username = '';
$scope.password = '';
$scope.dialogMessage;
$scope.logout = function () {
$rootScope.loggedinUser = {};
$rootScope.loggedin = false;
$cookies.remove('logincredentials');
}
$scope.login = function () {
if ($scope.username != '' && $scope.password != '') {
$http.get('https://localhost:8181/WebApplicationStom/webresources/domain.login', {headers: {
Authorization: $scope.username + ':' + $scope.password
}}).success(function (data) {
if (data.ime == '123') {
$rootScope.loggedin = true;
$rootScope.loggedinUser = data;
$cookies.put('logincredentials', '1:1');
} else {
$rootScope.loggedin = false;
$rootScope.loggedinUser = {};
$scope.dialogMessage = 'Uneli ste pogresan username i/ili password';
}
});
} else {
$scope.dialogMessage = 'Unesite username i password';
}
}
$scope.open = function (size) {
$scope.modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
items: function () {
return $scope.items;
}
}
});
};
$scope.openToast = function () {
$mdToast.show('Hello!');
};
}])
.controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items, $rootScope) {
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
});<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Stomatoloska ordinacija</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ui-grid.info/release/ui-grid.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ui-grid.info/release/angular-ui-grid/ui-grid.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-cookies.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default ">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/view0">Home</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#/view1">Mesto</a></li>
<li><a href="#/view2">Lekar</a></li>
<li><a href="#/view3">Pacijent</a></li>
<li><a href="#/view4">Usluga</a></li>
<li><a href="#/view5">Poseta</a></li>
<li><a href="#/view6">view6</a></li>
</ul>
<div ng-controller="LoginCtrl">
<ul class="nav navbar-nav navbar-right">
<li><a href="#" ng-click="open()"><span class="glyphicon glyphicon-log-in"></span> Login/Logout</a></li>
<li><a ><span class="glyphicon glyphicon-user"></span> {{loggedinUser.user}}</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="page">
<md-button class="md-raised md-primary">Primary</md-button>
<div ng-controller="LoginCtrl" >
<md-button ng-click="openToast()">
Open a Toast!
</md-button>
<script type="text/ng-template" id="myModalContent.html">
<div ng-controller="LoginCtrl">
<div class="container">
<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3">
<button type="button" class="close" data-dismiss="modal" ng-click="cancel()"><span aria-hidden="true">×</span></button>
<div class="panel panel-default" >
<div class="panel-heading">
<div class="panel-title text-center">Login/Logout</div>
</div>
<div class="panel-body" >
<form name="form" id="form" class="form-horizontal" enctype="multipart/form-data" method="POST">
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="user" type="text" class="form-control" name="user" value="" placeholder="User" ng-model="username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="password" type="password" class="form-control" name="password" placeholder="Password" ng-model="password">
</div>
<div class="form-group">
<!-- Button -->
<div>
<h4>{{dialogMessage}}</h4>
</div>
<div class="col-sm-12 controls">
<button type="button" class="btn btn-danger" ng-click="cancel();logout();"><i class="glyphicon glyphicon-log-in"></i> Logout</button>
<button type="button" class="btn btn-primary pull-right" ng-click="cancel();login()"><i class="glyphicon glyphicon-log-in"></i> Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</script>
</div>
<div class="footer navbar-fixed-bottom">
<div id="footer">Angular seed app: v<span app-version></span></div>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view0/view0.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="view3/view3.js"></script>
<script src="view4/view4.js"></script>
<script src="view5/view5.js"></script>
<script src="view6/view6.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
答案 0 :(得分：0)
Toast需要模块ngMaterial', 'ngMessages'。我认为你应该摆脱ngmaterial样本中codepen默认使用的assets-cache.js。在assets-cache.js中，您在其中定义了“MyApp”模块。并在文件中重新定义此模块会产生错误。请尝试避免文件并将ngMaterial', 'ngMessages'模块依赖项添加到模块中。这绝对可以解决你的问题。
答案 1 :(得分：0)
只需点击＆＃34;设置＆＃34;在codepen上的按钮，转到javascript选项卡，并确保您的html中包含所有这些依赖项。
错误告诉您没有正确导入。
答案 2 :(得分：0)
吐司很可能显示在另一个元素后面。使用parent将您的toast附加到HTML元素：
$scope.showSimpleToast = function () {
$mdToast.show($mdToast.simple().textContent('Hello!').parent("#HTMLelemID"));
};
parent（）将toast附加到应用程序的根元素。
访问$ mdToast文档here