我在部分视图中插入angular.bootstap时遇到问题。 Angular.bootstrap由于某种原因无法正常工作。我检查我的javascript错误控制台，但它没有显示任何错误！当我在主视图中复制我的代码时，它可以工作。添加文件后，它已经不再有用，但我不知道为什么？我的代码
<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html lang="en-US" ng-app="app">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="csrf-param" content="_csrf">
<meta name="csrf-token" content="bXRXLUhDZmFVAQRkDBQSABozZQB.IAAIBUECVyUFN1A5RjhpFw5TNA==">
<title>mytest</title>
<script type='text/javascript' src="/themes/admin/js/jquery.js"></script>
<link href="/foundation/css/foundation.css" rel="stylesheet" />
<script src="/assets/cca10116/angular/angular.js"></script>
<script src="/assets/cca10116/angular-route/angular-route.js"></script>
<script src="/assets/cca10116/angular-strap/dist/angular-strap.js"></script>
<script>paceOptions = {ajax: {trackMethods: ['GET', 'POST']}};</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.js"> </script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/themes/red/pace-theme-minimal.css" rel="stylesheet" />
<meta name="description" content="For documentation we advice you to contact us on www.sriservices.nl"/>
<meta name="author" content="ttt"/>
<meta name="copyright" content="ttt"/>
<script src="/foundation/js/vendor/modernizr.js"></script>
</head>
<body >
<div id='wrapper'>
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>
<a href="/#/" data-match-route="/$">
SRIservices Mexico Advance Framework
</a>
</h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#"> <span>menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="right">
<li class="divider"></li>
<li data-match-route="/$"><a href="/#/">Home</a></li>
<li class="divider"></li>
<li data-match-route="/about"><a href="/#/about">About</a></li>
<li class="divider"></li>
<li data-match-route="contact"><a href="/#/contact">Contact</a></li>
<li class="divider"></li>
<li onclick='$("body").html("");location.reload(true);'><a href="/login">Login</a></li>
<li class="divider"></li>
</ul>
</section>
</nav>
<div ng-view></div>
</div>
<div class='container footer'>
<div class='row footer-content'>
The advance framework "for all your software" is
</div>
</div>
<script src="/js/app.js"></script>
<script src="/js/angular-css.min.js"></script>
<script>
document.write('<script src=js/vendor/' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
<script src="/foundation/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<div class='container'>
<div class="row">
<div class="large-8 columns" id='form'>
<h1>Contact</h1>
<p>
If you have business inquiries or other questions, please fill out the following form to contact us. Thank you.
</p>
<form id="contact-form" action="" method="post" role="form" ng-controller="validateCtrl" name="myForm" novalidate>
<label class="control-label" for="contactform-name">Name</label>
<input type="text" id="contactform-name" class="form-control" name="name" ng-model="name" required>
<span style="color:red" ng-show="myForm.name.$dirty && myForm.name.$invalid">
<span ng-show="myForm.name.$error.required">Name is required.</span>
</span>
<label class="control-label" for="contactform-email">Email</label>
<input type="text" id="contactform-email" class="form-control" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
<label class="control-label" for="contactform-subject">Subject</label>
<input type="text" id="contactform-subject" class="form-control" name="subject" ng-model="subject" required>
<span style="color:red" ng-show="myForm.subject.$dirty && myForm.subject.$invalid">
<span ng-show="myForm.subject.$error.required">Subject is required.</span>
</span>
<label class="control-label" for="contactform-body" ng-model="body" required>Body</label>
<textarea id="contactform-body" class="form-control" name="body" rows="6" ng-model="body" required></textarea>
<span style="color:red" ng-show="myForm.body.$dirty && myForm.body.$invalid">
<span ng-show="myForm.body.$error.required">Body is required.</span>
</span>
<br style='clear:both;' />
<button type="submit" class="btn btn-primary" name="contact-button" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid">Submit</button>
</form>
</div>
</div>
</div>
<script>
var app1 = angular.module('myApp', []);
app1.controller('validateCtrl', function($scope) {
$scope.name = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
$( document ).ready(function() {
angular.bootstrap(document.getElementById('contact-form'), ['myApp']);
});
</script>
</body>
</html>
到目前为止我的app.js看起来像是：
//https://oclazyload.readme.io/docs
var app = angular.module('app', [
'ngRoute', //$routeProvider
'mgcrea.ngStrap', //bs-navbar, data-match-route directives
'door3.css',
]);
app.config(['$routeProvider','$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/partials/index.html',
}).
when('/about', {
templateUrl: 'views/partials/about.html',
}).
when('/contact', {
templateUrl: 'views/partials/contact.html',
}).
when('/login', {
templateUrl: 'themes/admin/views/admin/partials/login.html'
}).
otherwise({
templateUrl: 'views/partials/index.html',
});
//check browser support
if(window.history && window.history.pushState){
//$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">
// to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase
// if you don't wish to set base URL then use this
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
}]);