我正在尝试使用 AngularJS Material 库添加自动提示。它现在对我来说很好用。但现在的问题是，当我添加 ng-App="MyApp2" 时，我的 menuToggle 按钮仅在移动设备上不起作用，但在桌面上运行良好。 如果我要添加 ng-App="" 然后它也工作正常，但显然自动建议功能将停止工作。
我陷入了这个问题。请帮我... 预先感谢。
<!DOCTYPE HTML>
<html>
<head>
<title>Booking | web</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<link rel='stylesheet prefetch' href='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.5/angular-material.css'>
<style>
input.ng-touched.ng-invalid {
box-shadow: 0 0 0 1px #ff0000;
}
input, select, textarea {
color: Black;
font-family: "Open Sans", Helvetica, sans-serif;
font-size: 15pt;
font-weight: 400;
letter-spacing: 0.075em;
line-height: 1.65em;
}
</style>
</head>
<body>
<!-- Page Wrapper -->
<div id="page-wrapper">
<!-- Header -->
<header id="header" class="alt">
<h1><a href="index.php">web</a></h1>
<nav id="nav">
<ul>
<li class="special">
<a href="#menu" class="menuToggle"><span>Menu</span></a>
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="price_calculator.php">Start Booking</a></li>
<li><a href="about_us.php">About Us</a></li>
<li><a href="enquiry.php">Enquiry</a></li>
</ul>
</div>
</li>
</ul>
</nav>
</header>
<!-- Main -->
<article id="main">
<header>
<h2>Price Calculator</h2>
<p>Calculate your trip cost </p>
</header>
<section id="three" class="wrapper style3 special">
<div class="inner">
<section ng-controller="DCtrl as ctrl" ng-app="MyApp2" ng-cloak>
<form method="post" action="fare.php" name="searchForm">
<div class="row uniform">
<div class="6u 12u$(xsmall)" style="width:100%">
<md-autocomplete md-input-name="origin" ng-disabled="true" md-selected-item="ctrl.selectedItemO" md-search-text="ctrl.searchTextO" md-items="item in ctrl.querySearchO(ctrl.searchText)" md-item-text="item.display" placeholder="From: Varanasi" >
</md-autocomplete>
</div>
<div class="6u$ 12u$(xsmall)" style="width:100%; ">
<md-autocomplete required="" flex="" md-input-name="destination" md-input-minlength="l" md-input-maxlength="18" md-selected-item="ctrl.selectedItem" md-search-text="ctrl.searchText" md-items="item in ctrl.querySearch(ctrl.searchText)" md-item-text="item.display" md-require-match="" placeholder="Destination City" >
<md-item-template>
<span md-highlight-text="ctrl.searchText">{{item.display}}</span>
</md-item-template>
<md-not-found>
No matches found.
</md-not-found>
</md-autocomplete>
<div ng-messages="searchForm.destination.$error" ng-if="searchForm.destination.$touched">
<div ng-message="required" style="color:#ff0000;">You <b style="color:#ff0000;">must</b> have a destination.</div>
<div ng-message="md-require-match" style="color:#ff0000;">Please select an existing city.</div>
<div ng-message="minlength">Your entry is not long enough.</div>
<div ng-message="maxlength">Your entry is too long.</div>
</div>
</div>
<div class="6u$ 12u$(xsmall)" style="width:100%">
<ul class="actions vertical">
<li><input type="submit" value="Calculate" class="special"
ng-disabled="searchForm.destination.$untouched || searchForm.destination.$invalid" />
</li>
</ul>
</div>
</div>
</form>
</section>
</div>
</section>
</article>
<!-- Footer -->
<footer id="footer">
<ul class="icons">
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="https://www.facebook.com/justcaritdotcom/" target="_blank" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon fa-envelope-o"><span class="label">Email</span></a></li>
</ul>
<ul class="copyright">
<li>© Made with <i class="fa fa-heart" aria-hidden="true" style="color:#cc0052;"></i> for <a href="index.php">web</a></li>
</ul>
</footer>
</div>
<!-- Scripts -->
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js'></script>
<script src='https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.5/angular-material.js'></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
<script>
(function () {
'use strict';
angular
.module('MyApp2',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('DCtrl', DCtrl);
function DCtrl ($timeout, $q) {
var self = this;
self.states = loadAll();
self.selectedItem = null;
self.searchText = null;
self.querySearch = querySearch;
function querySearch (query) {
var results = query ? self.states.filter( createFilterFor(query) ) : self.states;
var deferred = $q.defer();
$timeout(function () { deferred.resolve( results ); }, Math.random() * 1000, false);
return deferred.promise;
}
function loadAll() {
var allStates = 'Alabama, Alaska, Arizona, Arkansas, California, Colorado, Connecticut, Delaware,\
Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
Wisconsin, Wyoming';
return allStates.split(/, +/g).map( function (state) {
return {
value: state.toLowerCase(),
display: state
};
});
}
function createFilterFor(query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(state) {
return (state.value.indexOf(lowercaseQuery) === 0);
};
}
}
})();
</script>
</body>
</html>
最佳答案
如果你像 [ng-App=""] 那样删除，那么显然 angular 会失败，因为没有定义应用程序，显然任何其他不属于 angular 的功能都可以工作。您需要注意这两个功能应该结合使用。
无论如何，只要不删除 ng-app name，您的代码就可以正常工作。弄清楚如何在不影响上述内容的情况下进行菜单切换。
Error: [ng:areq] http://errors.angularjs.org/1.5.5/ng/areq?p0=DCtrl&p1=not%20a%20function%2C%20got%20undefined
at VM7124 angular.min.js:6
at qb (VM7124 angular.min.js:23)
at Pa (VM7124 angular.min.js:23)
at VM7124 angular.min.js:89
at O (VM7124 angular.min.js:72)
at n (VM7124 angular.min.js:64)
at g (VM7124 angular.min.js:58)
at VM7124 angular.min.js:57
at VM7124 angular.min.js:21
at n.$eval (VM7124 angular.min.js:144)
关于javascript - 添加我的 AngularJS 模块时，menuToggle 不适用于移动设备，但适用于桌面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47448599/