[英]ngSmoothScroll angular directive not working
我正在使用以下指令https://github.com/d-oliveros/ngSmoothScroll使該項目中的內容順利滾動到所選元素。
這是我的代碼:
...
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<!-- endbuild -->
<script src="bower_components/ngSmoothScroll/dist/angular-smooth-scroll.min.js"></script>
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/initcontroller.js"></script>
<!-- endbuild -->
<script src="scripts/libs/materialize.min.js"></script>
<script src="scripts/libs/angular-materialize.js"></script>
</body>
...
這是包含腳本的地方(~/angular-smooth-scroll.min.js)
,在我的app.js
文件中,我有:
angular
.module('sccateringApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.materialize',
'smoothScroll'
])
'smoothScroll'
是項目的實際依賴包含。 按照本文開頭給出的鏈接中的說明,這是我在視圖中所做的:
<li><a href="#" scroll-to="service-info" container-id="service-info">Contáctame</a></li>
...
<section class="service-info" id="service-info">
<h1 class="sofia-font">Detalles de Servicio</h1>
...
但是,沒有平滑的滾動發生,並且在我的grunt serve
任務中沒有控制台或jslint給出的警告/錯誤。
知道我可能做錯了什么嗎? 我對角度非常新,我仍然試圖找到它的方式。
我不確定,但可能是因為您在鏈接上使用container-id而不是非錨標記。 我正在使用它滾動到我的頁腳中的元素。 我的代碼是:
//the anchor link in my nav
<a href="#" scroll-to="footer" duration="2500">Click Me</a>
...
//the element I want to scroll to
<div id="footer"></div>
...
縮小版本對我不起作用所以我的腳本如下:
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-aria/angular-aria.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<script src="/bower_components/angular-material/angular-material.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/ngSmoothScroll/lib/angular-smooth-scroll.js"></script>
<script src="/js/app.module.js"></script>
<script src="/js/app.controller.js"></script>
<script src="/js/app.service.js"></script>
對於模塊:
angular
.module('glasser', [
'ngMaterial',
'ngSanitize',
'smoothScroll'
])
它對我來說也不起作用,請嘗試使用Angular-Scroll 。 它有一個現場演示,首先在瀏覽器中進行測試。
它還有一個'間諜'指令,因此您可以將類添加到視圖中的元素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.