脚本是导入的并且在基页上工作,但不适用于angularjs注入的组件

时间:2017-09-28 09:50:27

标签: jquery angularjs laravel-5.5

我正在使用有角度的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: '/'
        });
});

0 个答案:

没有答案