Question

直升机，我是AngularJS的新手，我刚开始使用$ mdToast基本函数Show（）。这是我对这个问题的完整代码，希望你能帮助我。

＆＃13;

'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');
            };
        });

＆＃13;

<!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">&times;</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>

＆＃13;

＆＃13; 所以问题不在于包含的库，我尝试了它并且它没有用。我还要提一下，我正在使用angularJS种子作为项目的孩子。谢谢你的时间。

Answer 1

Toast需要模块ngMaterial', 'ngMessages'。我认为你应该摆脱ngmaterial样本中codepen默认使用的assets-cache.js。在assets-cache.js中，您在其中定义了“MyApp”模块。并在文件中重新定义此模块会产生错误。请尝试避免文件并将ngMaterial', 'ngMessages'模块依赖项添加到模块中。这绝对可以解决你的问题。

这是sample codepen

Answer 2

只需点击＆＃34;设置＆＃34;在codepen上的按钮，转到javascript选项卡，并确保您的html中包含所有这些依赖项。

错误告诉您没有正确导入。

Answer 3

吐司很可能显示在另一个元素后面。使用parent将您的toast附加到HTML元素：

 $scope.showSimpleToast = function () {
            $mdToast.show($mdToast.simple().textContent('Hello!').parent("#HTMLelemID"));
        };

默认情况下，

parent（）将toast附加到应用程序的根元素。
访问$ mdToast文档here

角度材料设计使用$ mdToast，吐司不会在我的网站上显示

3 个答案: