我正在使用有角度的laravel,我实际上是网络开发的新手并且有角度注入的问题。注入工作正常,注入代码的样式也可以,但不是脚本。 分析firefox检查代码上的事件我可以看到
的事件<a href="#about" class="btn btn-primary btn-xl page-scroll">Find out more</a>
但不适用于
<a href="#services" class="page-scroll btn btn-default btn-xl sr-button">Get Started!</a>
主页上的正文
<body>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a href="#page-top" class="navbar-brand page-scroll"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#services">Services</a>
</li>
<li>
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<header>
<div class="header-content">
<div class="header-content-inner">
<h1 id="homeHeading"></h1>
<a href="#about" class="btn btn-primary btn-xl page-scroll">Find out more</a>
</div>
</div>
</header>
<!-- this is where content will be injected -->
<div ng-view></div>
<!-- Load Javascript Libraries (AngularJS, JQuery, Bootstrap) -->
<script src="<?= asset('bower_components/jquery/dist/jquery.min.js') ?>"></script>
<script src="<?= asset('bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
<!-- Plugin JavaScript -->
<script src="<?= asset('https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js') ?>"></script>
<script src="<?= asset('vendor/scrollreveal/scrollreveal.min.js') ?>"></script>
<script src="<?= asset('vendor/magnific-popup/jquery.magnific-popup.min.js') ?>"></script>
<!-- Theme JavaScript -->
<script src="<?= asset('js/creative.min.js') ?>"></script>
<script src="<?= asset('bower_components/angular/angular.min.js') ?>"></script>
<script src="<?= asset('bower_components/angular-cookies/angular-cookies.min.js') ?>"></script>
<script src="<?= asset('bower_components/angular-route/angular-route.min.js') ?>"></script>
<!-- AngularJS Application Scripts -->
<script src="<?= asset('app/app.module.js') ?>"></script>
</body>
注入的ng-view代码:
<section class="bg-primary" id="about">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<a href="#services" class="page-scroll btn btn-default btn-xl sr-button">Get Started!</a>
</div>
</div>
</div>
</section>
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">At Your Service</h2>
<hr class="primary">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-diamond text-primary sr-icons"></i>
<h3>Sturdy Templates</h3>
<p class="text-muted">Our templates are updated regularly so they don't break.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-paper-plane text-primary sr-icons"></i>
<h3>Ready to Ship</h3>
<p class="text-muted">You can use this theme as is, or you can make changes!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-newspaper-o text-primary sr-icons"></i>
<h3>Up to Date</h3>
<p class="text-muted">We update dependencies to keep things fresh.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="service-box">
<i class="fa fa-4x fa-heart text-primary sr-icons"></i>
<h3>Made with Love</h3>
<p class="text-muted">You have to make your websites with love these days!</p>
</div>
</div>
</div>
</div>
</section>
app.module.js我将它用于路线
var Pippo = angular.module('ng_route_name', ['ngRoute']);
// define our canstant for the API
Pippo.constant('constants', {
API_URL: 'http://localhost/polliciot/public/api/'
});
// configure our routes
Pippo.config(function($routeProvider)
{
$routeProvider
// route for the hamburgers page
.when('/',
{
templateUrl : 'app/home/home.template.htm',
controller : 'homeController'
})
.when('/devices',
{
templateUrl : 'app/devices/devices.template.htm',
controller : 'devicesController'
})
// route for a single hamburger
.when('/device/:deviceID',
{
templateUrl : 'app/device/device.template.htm',
controller : 'deviceController'
})
// default route
.otherwise(
{
redirectTo: '/'
});
});