使用$ mdToast進行角材料設計，toast不會顯示在我的網站上
[英]Angular material design using $mdToast, toast wont show on my website
問題描述
Helo，我是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/xxx/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>
3 個解決方案
解決方案1
0 2015-11-20 02:41:16
祝酒模塊ngMaterial', 'ngMessages' 。 我想你應該擺脫資產cache.js它使用ngmaterial在默認情況下， codepen樣品。 在assets-cache.js中，您定義了一個“ MyApp”模塊。 並在文件中重新定義此模塊會出錯。請嘗試避免使用文件，並將ngMaterial', 'ngMessages'模塊依賴項添加到模塊中。 這肯定可以解決您的問題。
這是一個示例代碼筆
解決方案2
0 2015-11-20 03:00:12
只需單擊codepen上的“設置”按鈕，轉到javascript選項卡，並確保您已在html中包含所有這些依賴項。
錯誤提示您未正確導入。
解決方案3
0 2018-06-07 14:19:46
吐司可能顯示在另一個元素后面。 使用父項將吐司附加到HTML元素：
$scope.showSimpleToast = function () {
$mdToast.show($mdToast.simple().textContent('Hello!').parent("#HTMLelemID"));
};
parent（）默認情況下將toast附加到應用程序的根元素。
在此處訪問$ mdToast文檔
Angular Material mdToast導致AngularJS無限$ digest循環
[英]Angular Material mdToast causing AngularJS Infinite $digest Loop
如何在$ mdToast角度材質中一起使用自定義主題和模板
[英]How to use custom theme and template together in $mdToast of angular material
嘗試包含ngMaterial $ mdToast時，Angular Material“[$ injector：unpr]未知提供程序”錯誤，$ animate
[英]Angular Material “[$injector:unpr] Unknown provider” errors when trying to include ngMaterial $mdToast, $animate
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
如何隱藏Angular Material mdToast？
角材料$ mdToast在Firebug中引發錯誤
mdToast的角材料HighlightClass不起作用
Angular Material mdToast導致AngularJS無限$ digest循環
如何在$ mdToast角度材質中一起使用自定義主題和模板
為什么我的角度列表不顯示？
嘗試包含ngMaterial $ mdToast時，Angular Material“[$ injector：unpr]未知提供程序”錯誤，$ animate
從棱角材料設計開始
角度和材質設計燈
為什么我的角度材料設計選擇選項不能被選中？
相關標簽