引导滑块不起作用

我使用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

引导滑块不起作用

回答

相关问题