更改Angular模型后刷新Bootstrap ScrollSpy

一尘不染

更改Angular模型后刷新Bootstrap ScrollSpy

angularjs

我正在尝试使用bootstrapscollspy突出显示由角度中继器生成的列表项。

我遇到的问题是，我在Angle将模型更改应用到视图之前，正在从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')
 }

阅读 243

2020-07-04

共1个答案

一尘不染

我如何使用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 = '';
  };
}

当监视的范围var是对象或数组时，需要scope.watch（…）的第三个参数。不幸的是，该解决方案仍然导致在注释中出现了无法识别的表达问题，randomguy提到了这一问题。我最终通过在watch函数中使用超时来解决此问题。

2020-07-04