6

ブートストラップscollspyを使用して、Angularリピーターによって生成されたリストアイテムを強調表示しようとしています。

私が遭遇している問題は、Angularがモデルの変更をビューに適用する前に、Angularコントローラーからscrollspyプラグインを更新していることです。

（Angularモデルだけでなく）DOM自体が更新された後にscrollspy（'refresh'）呼び出しが確実に行われるようにするためのAngularの方法は何ですか？

レンプレート：

<div class="span2" id="addressList">
    <ul class="nav nav-tabs nav-stacked affix">
       <li ng-repeat="addr in addresses"><a href="#{{addr.id}}">{{addr.id}}</a></li>
    </ul>
</div>

コントローラ：

$scope.httpSuccessCallback = function (data) 
     $scope.addresses.push(data);
     $('[data-spy="scroll"]').scrollspy('refresh'); //calls $('#addressList .nav > li > a')
 }
4

4 に答える 4

5

スクロールスパイについて何も知らなくても、AngularでJQueryプラグインを一般的に使用する方法は次のとおりです。

app.directive('scrollSpy', function (){
   return {
     restrict: 'A',
     link: function(scope, elem, attr) {
         elem.scrollSpy({ /* set up options here */ });

         //watch whatever expression was passed to the
         //scroll-spy attribute, and refresh scroll spy when it changes.
         scope.$watch(attr.scrollSpy, function(value) {
              elem.scrollSpy('refresh');
         });
     }
   };
});

次にHTMLで：

<div scroll-spy="foo">Do something with: {{foo}}</div>

上記の例は非常に一般的ですが、基本的にプラグインを要素に適用し、$scope.fooが変更されるたびに「refresh」などを呼び出します。

それがお役に立てば幸いです。

于 2013-01-11T18:36:37.053 に答える
4

Bleshの答えを使用して、これをどのように解決したか

レンプレート：

  <body ng-app="address" ng-controller="AddressCtrl" scroll-spy="addresses">
    <div class="container">
      <form ng-submit="lookupAddress()">
        <input type="text" ng-model="addressText" />
        <button id="addressQueryBtn">Submit</button>
      </form>

      <div id="addressList">
        <ul>
          <li ng-repeat="addr in addresses">{{addr}}</li>
       </ul>
      </div>

    </div>
  </body>

Angular JS：

angular.module('address', []).
directive('scrollSpy', function($timeout){
  return function(scope, elem, attr) {
    scope.$watch(attr.scrollSpy, function(value) {
      $timeout(function() { elem.scrollspy('refresh') }, 200);
    }, true);
  }
});

function AddressCtrl($scope, $http) {
  $scope.addresses = [];

  $scope.lookupAddress = function() {
    $scope.addresses.push($scope.addressText);
    $scope.addressText = '';
  };
}

監視対象のスコープ変数がオブジェクトまたは配列の場合、scope.watch（...）の3番目の引数が必要です。残念ながら、この解決策では、randomguyがコメントで言及している認識されない表現の問題が発生します。最終的には、監視機能でタイムアウトを使用してこれを解決しました。

于 2013-02-07T14:36:07.843 に答える
1

Angular内でScrollspyを使用する際のいくつかの課題があります（おそらく、2013年8月の時点でAngularUIにまだScrollspyが含まれていない理由です）。

  1. DOMの内容に変更を加えるときはいつでも、scrollspyを更新する必要があります。

    これは、ここで提案されているように、要素を$ watchし、scrollspy（'refresh'）呼び出しのタイムアウトを設定することで実行できます。

  2. nav要素を使用してスクロール可能な領域をナビゲートできるようにする場合は、nav要素のデフォルトの動作をオーバーライドする必要があります。

これは、preventDefaultを使用してナビゲーションを防止し、scrollTo関数をアタッチすることで実現できます。

Plunkerで実用的な例を紹介しました：http：//plnkr.co/edit/R0a4nJi3tBUBsluBJUo2？p = Preview

于 2013-08-05T21:18:16.553 に答える
-1

私はしばらくの間この問題の解決策を探していましたが、それを見つけることができませんでした。いくつかのディレクティブを使用してスクロールスパイサービスを作成することで、自分で実装することになりました。

このサービスは、すべてのスパイセクションとそのオフセットを追跡します。ディレクティブは、スクロールイベントを作成し、ナビゲーションアイテムを強調表示して、すべてのセクションが配置されている場所をサービスに通知します。この実装はスコープ変数を監視しないため、アプリケーションはすべてのセクションのオフセットを更新するためにメッセージをブロードキャストする必要があります。

私の例はGithubにあります。

于 2013-08-28T23:55:57.000 に答える