Javascript 引导滑块不工作

我使用

Angular.js

和

Bootstrap

构建我的应用程序。指令将输入标记插入DOM。我想在输入标记上使用

滑块

，对其进行修改。我跟着火车走

tag=''；
//将其传递给模板并推送到DOM
$（'.slider'）。slider（{
最高：500，
方向：“水平”，
选择：“之后”
});

jQuery对象上存在

slider

函数，但是调用它没有任何效果，没有任何异常！我的输入仍然只是一个

标记

---

我的代码有什么问题？什么是不被考虑的？一些错误或依赖

您的JavaScript代码是否在一个内部运行？可能是JS在DOM加载完成之前执行，因此它找不到

.slider

元素。试试这个：

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

---

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

下面是我为bxSlider做的一个原型：

myApp.directive（'slideit'，function（）{
返回函数（范围、elm、属性）{
范围$watch（属性、功能（图像）{
var html=''；
对于（var i=0；i

这有点复杂，所以必须手动创建DOM

---

您可以将html代码放在部分中，并在指令中引用它。elm变量中可以使用该指令创建的DOM引用。如果你在上面调用.slider（），它应该可以完成这项工作。

你需要为此编写一个指令，你的意思是jqueryui slider Right如果在加载页面时输入的.slider没有进入DOM，则代码

$（'.slider'）。slider（{…}）

不会做任何事情；因为它是在页面加载后解释的。他必须在添加输入元素后声明滑块。

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

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