0

私はAngularJS、AngularUIのjQueryパススルーu​​iJq、およびjQueryのnoUiSliderプラグインを使用していますが、問題は実際にはメソッドへのアクセスに関するものです。HTML 部分はスライダーを正しくレンダリングします。スライダーの出力値に双方向バインドする必要があります。以下の JavaScript コードとそれらのバリエーションをコントローラーで試してみましたが、うまくいきませんでした。

uiJq はすべての jQuery プラグインで動作しないようです。noUiSlider が機能しないかどうか疑問に思っており、カスタム ディレクティブを記述する必要があります。また、遅延実行に対処する必要があるのか​​ 、それともuiRefresh手動で行う必要があるのか​​ もわかりません$watch。

HTML

<div class="noUiSlider" id="abc" ui-jq="noUiSlider"
    ui-options="{range: [0, 100], start: 50, handles: 1}"></div>

JS

app.controller('MainCtrl', function ($scope) {
    $scope.selectionValue = $('#abc').noUiSlider().val();
    // error, seems to override whatever is in html
    $scope.selectionValue = $('#abc').val();
    // no error but no value is returned
});

ありがとう！

4

2 に答える 2

3

さて、あなたは一度に多くのさまざまな問題に直面しており、どこから始めればよいかわかりません。最初に、これを読んでください: https://github.com/angular/angular.js/wiki/Understanding-Directives

次に、コントローラーで jQuery を使用しないでください。コントローラーは一度起動し、テンプレートが「レンダリング」される前に起動します。これは、DOM 値が初期化される前 (または存在する前) に DOM 値を取得してい.noUiSlider()て、DOM 要素で実行されていないためにエラーが発生していることを意味します。

AngularJSに関しては、非同期的に考える必要があります。テンプレートは常に変更、更新、更新されており、この期待を念頭に置いてコーディングする必要があります。

とにかく、簡単に言えば、スライド コールバック関数を使用してモデルを更新する方がよいでしょう。requires: 'ngModel'

ui-options="{range, [0,100], start: 50, handles: 1, slide: slideCallback }"
...
$scope.slideCallback = function() {
  $scope.myModel = $(this).val();

  // this tells angular to refresh since an async event occurred outside of angular
  $scope.$apply(); 
};
于 2013-05-08T01:46:49.030 に答える