引導滑塊不起作用

我使用Angular.js和Bootstrap來構建我的應用程序。一個指令將輸入標籤插入到DOM中。我想在輸入標籤上使用slider來修改它。我跟着tutorial。引導滑塊不起作用

tag = '<input type="text" class="slider" ng-model="costPerDay"/>'; 
// pass it to a template and push to DOM 
$('.slider').slider({  
    max: 500,     
    orientation: 'horizontal', 
    selection: 'after'   
});

的slider函數存在jQuery對象，但調用它沒有任何效果，沒有任何例外！我的輸入仍然只是一個<input>標籤。

我的代碼有什麼問題？什麼沒有考慮到？一些錯誤或依賴關係？

來源

2013-04-30 I159

你需要編寫此 – 2013-04-30 13:34:25

一個指令，你的意思是jQueryUI的滑塊向右 – 2013-04-30 13:35:28

您的JavaScript代碼是否在document ready handler的內部運行？這可能是JS在DOM完成加載之前執行的，因此它沒有找到您的.slider元素。試試這個：

$(document).ready(function() { 
    $('.slider').slider({  
     max: 500,     
     orientation: 'horizontal', 
     selection: 'after'   
    }); 
})

來源

2013-04-30 13:32:55 eliah

如果輸入「.slider」不進DOM，當頁面正在加載，代碼'$（「滑」）。滑塊（ {...}）「什麼都不會做;導致它在頁面加載後被解釋。他必須在添加輸入元素後聲明滑塊。 – Getz 2013-04-30 14:26:21

嘗試把初始化代碼放在指令中。

這裏有一個原型我做了bxSlider： http://jsfiddle.net/vibhor/3GFWS/

myApp.directive('slideit', function() { 
    return function (scope, elm, attrs) { 
     scope.$watch(attrs.slideit, function (images) { 
      var html = ''; 
      for (var i = 0; i < images.length; i++) { 
       html += '<li><img src="' + images[i].src + '" alt="" /></li>'; 
      } 
      $("#" + $(elm[0]).attr('id')).html(html).bxSlider({ 
       adaptiveHeight: true, 
       mode: 'fade' 
      }); 
     }); 
    }; 
});

這是一個有點複雜，所以不得不手動創建DOM。

你可以把你的html代碼放在partial中，並在指令中引用它。該指令創建的DOM引用將在elm變量中可用。如果你打電話給.slider（），它應該完成這項工作。

來源

2013-04-30 16:10:06

引導滑塊不起作用

回答

相關問題