2

我使用Angular.jsandBootstrap来构建我的应用程序。指令将输入标签插入 DOM。我想slider在输入标签上使用来修改它。我按照教程。

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>标签。

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

4

2 回答 2

2

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

这是我为 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() ，它应该可以完成这项工作。

于 2013-04-30T16:10:06.817 回答
1

您的 JavaScript 代码是否在文档就绪处理程序中运行？可能是在 DOM 完成加载之前 JS 正在执行，因此它没有找到您的.slider元素。试试这个：

$(document).ready(function() {
    $('.slider').slider({       
      max: 500,                  
      orientation: 'horizontal',
      selection: 'after'        
    });
})
于 2013-04-30T13:32:55.733 回答