您好,登錄后才能下訂單哦!
這篇文章主要介紹Angular.js如何通過自定義指令directive實現(xiàn)滑塊滑動效果,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
方法如下
1.下面是我html部分代碼,detail-scroll是我自定義的標(biāo)簽
............... <div id="time" > <div ng- detail-scroll > <div ng-click="maskTimeDetail()"> <i class="zmdi zmdi-zoom-in" ></i> </div> </div> <div class="tl-item alt" ng-repeat="time in timeList"> //..................... </div> </div>
2.開始寫js代碼
這里假設(shè)我們在某一個module下,控制器叫做AppCtrl
angular.module('xxxx',[ ]) .controller('AppCtrl', ['$scope',AppCtrl]) .directive('detailScroll',function(){ // 返回一個函數(shù) return{ link : function($scope,element,attr){ var container = angular.element(window); var timeH = $('#time').offset().top;//獲取該部分距離頁面頂部距離 container.on('scroll', function() { if(container.scrollTop()>timeH){ $scope.maskStyle.top = container.scrollTop()-timeH+$('#time .alt').eq(0).height()/2+'px'; } }); }, restrict:'A', //ECMA E元素 C類名 M注釋 A屬性 }; }); function AppCtrl($scope) { //這是我給這個滑塊定義的樣式,一定要記住你要相對應(yīng)你的父級元素相對定位, //因為我們要改變是它的top值 $scope.maskStyle={ width: '30px',height: '30px', 'background-color': '#ea1c0d', 'z-index': 999, position: 'absolute', top:0,left:0, opacity:'0.8', 'text-align':'center' }; }
detailScroll是 angular命名規(guī)范,駝峰式,一定要這樣寫,angular只有用自定義指令,才可以用jquery的一些方法。。
以上只是個簡單的例子來演示一下,如果滑塊移動的top值不準(zhǔn)確,可以自行計算。
這只是簡單的自定義指令寫法,還有一個是可以引入模板
angular.module('app', []) .directive('myDirective', function() { function appCtrl($scope){ //處理邏輯 } return { restrict: 'EA', replace: true, scope:{ //想要從父級controller傳到這里的函數(shù),對象,變量,分別用(&,=,@),具體怎么用大家可以參考angular官網(wǎng)詳解 } templateUrl:'路徑或是html拼接的字符串', controller: function($scope, $element, $attrs, $transclude) { // 控制器邏輯 } //controller這樣寫也可以,還有一種直接寫controller名,通過注入的方法,比如 controller:['$scope',appCtrl] } })
以上是“Angular.js如何通過自定義指令directive實現(xiàn)滑塊滑動效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。