2016-11-04 44 views
3

AngularJS的新功能。以下ui-scroll不起作用。感謝任何幫助。AngularJS ui-scroll不工作(無法設置屬性'overflowY'未定義)

https://plnkr.co/edit/PVCWRf1DaVtt4j7z15wx?p=preview

試圖實現簡單的UI滾動沒有任何的jQuery庫。下面是示例代碼使其工作,以便我可以擴展它在應用程序中實現。

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Hospital</title> 
    </head> 
    <body> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
    <script src="scroll.js"></script> 
    <script src="ui-scroll.js"></script> 
    <link rel="stylesheet" type="text/css" href="scroll.css"> 

    <div ng-app="scrollerTestApp" ng-controller="ScrollerController"> 
     <div ui-scroll="movie in movieDataSource"> 
     <h2>{{ movie.description }}</h2> 
     </div> 
    </div> 
    </body> 
</html> 

scroll.js

var appModule = angular.module('scrollerTestApp', ['ui.scroll']) 
    .controller('ScrollerController', ['$scope', function($scope) { 

    $scope.movieDataSource = { 
     get: function(index, count, callback) { 
     var i, items = [], 
      item; 

     var min = 1; 
     var max = 100; 

     for (i = index; i < index + count; i++) { 
      if (i < min || i > max) { 
      continue; 
      } 
      item = { 
      description: "Item : " + i, 
      imageURL: "http://placehold.it/96x96&text=" + i 
      }; 
      items.push(item); 
     } 
     callback(items); 
     } 
    } 
    }]); 

回答

0

你的問題是你缺乏ui-scroll-jqlite

根據文檔:上述 方法

文件DIST/UI的滾動jqlite.js房屋實現,也有在你的頁面加載。請注意, 方法在單獨的模塊「ui.scroll.jqlite」中實現,而 這個名稱也應該包含在主模塊 的相關性列表中。

那說,我讓你的plnkr編輯。

希望它有幫助;)。

0

由於angular-ui-scrollv1.6.0ui.scroll.jqlite模塊已被棄用。所有必要的說明已被封裝到ui.scroll模塊中。因此,最好的解決方案是升級angular-ui-scroll依賴項。


如果您正在使用angular-ui-scroll V1.6.0之前,您應該添加ui.scroll.jqlite模塊到App明確:

angular.module('scrollerTestApp', ['ui.scroll.jqlite', 'ui.scroll']) 

此外,它意味着ui-scroll-jqlite[.min].js應該添加到您的腳本/建造ui-scroll[.min].js前。

相關問題