6

我正在尝试使用引导程序 scollspy来突出显示由角度中继器生成的列表项。

我遇到的问题是，在 angular 将模型更改应用于视图之前，我正在从 angular 控制器刷新 scrollspy 插件。

确保在 DOM 本身更新后发生 scrollspy('refresh') 调用的角度方式是什么（不仅仅是角度模型）？

模板：

<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>

角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 = '';
  };
}

当监视范围 var 是对象或数组时，需要 scope.watch(...) 的第三个参数。不幸的是，这个解决方案仍然导致无法识别的表达式问题 randomguy 在评论中提到。我最终通过在 watch 函数中使用超时来解决这个问题。

于 2013-02-07T14:36:07.843 回答
1

在 Angular 中使用 Scrollspy 存在一些挑战（这可能是 AngularUI 到 2013 年 8 月仍未包含 Scrollspy 的原因）。

  1. 每当您对 DOM 内容进行任何更改时，都必须刷新 scrollspy。

    正如这里所建议的，这可以通过 $watching 元素并为 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 回答