真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關于我們
028-86922220

• 網(wǎng)站建設
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關于我們

...............

 
 
  
 

2.開始寫js代碼

這里假設我們在某一個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) {
 //這是我給這個滑塊定義的樣式，一定要記住你要相對應你的父級元素相對定位，
 //因為我們要改變是它的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值不準確，可以自行計算。

這只是簡單的自定義指令寫法，還有一個是可以引入模板

　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)容對大家有幫助，更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！