Question

我使用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'        
});

jQuery对象上存在slider函数，但调用它没有任何效果，没有任何异常！我的输入仍然是<input>标记。

我的代码有什么问题？什么没有考虑到？什么错误或依赖？

Answer 1

尝试将初始化代码放在指令中。

这是我为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代码放在部分中，并在指令中引用它。指令创建的DOM的引用将在elm变量中提供。如果你在它上面调用.slider（），它应该可以完成这项工作。

Answer 2

您的JavaScript代码是否在document ready handler内运行？可能是在DOM完成加载之前JS正在执行，因此它找不到您的.slider元素。试试这个：

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

Bootstrap滑块不起作用

2 个答案: