如何使用帶有角度js的nanoScroller

我與nanoScroller有問題。我在porject上使用Angularjs。我是一個指令，我想調用nanoScroller。它看起來像這樣：如何使用帶有角度js的nanoScroller

<a ng-click='show-me'>Show Me</a> 
    <div class='nano' ng-show='show-me' style='height:100px'> 
    <ol class='nano-content'> 
    <li ng-repeat='post in posts'> 
     {{post.title}} 
    </li> 
    </ol> 
    </div>

我需要那個.nano元素有滾動條。當我按show-me時，div打開，其高度爲100px。我也在這個指令中調用了nanoScroller：angular.element(".nano").nanoScroller() 但是沒有出現滾動。也許這與納米元素不在頁面上並且nanoScroller已被調用的事實有關？我嘗試使用nanoScroller directive，但是我得到以下bug：當用「This is item」內容更改div的高度時，整個頁面的滾動向上移動。這可以通過將頁面滾動到底部並按下添加項目按鈕幾次來複制。

請幫忙。謝謝。

來源

2015-03-13 Artem Galas

當您知道元素可見時，您將不得不打電話給.nanoScroller()。我建議在超時包裹它，以便當DOM被更新，加入以下到辦理變更職位（即getPosts()，addPost()等），您的角度控制方法，它會更新..

// refresh nanoscroller 
setTimeout(function() { 
    $(".nano").nanoScroller(); 
}, 250);

在你情況下，您還需要將其添加到show-me方法中，除非show-me是一個簡單的布爾值，在這種情況下，您需要將setTimeout()彈出到$scope.$watch()塊中，該塊監視show-me的更改，像這樣（同樣，在你的控制器中）..

$scope.$watch('show-me', function(newValue, oldValue) { 
    if (newValue === true) { 
    // refresh nanoscroller 
    setTimeout(function() { 
     $(".nano").nanoScroller(); 
    }, 250); 
    } 
});

來源

2015-06-29 14:34:50 Darwayne

我會建議使用在這裏，而不是香草JS版的角$超時。 – Stone 2015-10-27 21:51:24

我不同意，$超時導致一個額外的摘要循環，在我的示例範圍變量不被修改。 – Darwayne 2015-10-29 11:37:45

我應該澄清爲什麼我建議$超時。它提供了一個承諾，我覺得它非常有用。你是對的，但如果你想要保存摘要循環並且不需要承諾，請使用setTimeout。根據我在團隊中的經驗，使用$超時更容易，或者我們都可以使用$ timeout，那麼我們都可以期待承諾。 – Stone 2015-10-30 22:57:05

以下是nanoScrollerJS與AngularJS生命週期集成的封裝器。

https://github.com/maxaon/angular-nanoscroller

DEMO PLUNKER

來源

2016-05-09 06:54:57 Manas

如何使用帶有角度js的nanoScroller

回答

相關問題