javascript - Bootstrap slider 不起作用

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

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

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

Answer 1

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

这是我为 bxSlider 制作的原型(prototype): 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() ，它应该可以完成这项工作。