2

と を使用Angular.jsしBootstrapてアプリケーションを構築します。ディレクティブは入力タグを 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'        
});

関数はsliderjQuery オブジェクトに存在しますが、それを呼び出しても例外はなく、何の効果もありません! 私の入力はまだ単なる<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 に答える