⑴ angularjs 怎麼監聽滾動條
2. 如果你是用的jQuery2.0以上版本，還需要修改ng-infinite-scroll.js程序，將所有的將所有的$window.xxx改為$(window).xxx, elem.xxx改為$(elem).xxx
3. 在HTML中引入script
<script type='text/javascript' src='path/to/jquery.min.js'></script>
<script type='text/javascript' src='path/to/angular.min.js'></script>
<script type='text/javascript' src='path/to/ng-infinite-scroll.min.js'></script>
4. HTML示例代碼如下：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div ng-controller='PostListController'>
<div infinite-scroll='demo.nextPage()' infinite-scroll-disabled='demo.busy' infinite-scroll-distance=''>
<div ng-repeat='item in demo.items'>
<p>
<input type="hidden" value="{{item.PostId}}" />
<label>{{item.WriterName}}</label>
<label>{{item.WriterMail}}</label>
<label>{{item.WreckerName}}</label>
<label>{{item.StartDate}}</label>
<label>{{item.Location}}</label>
<label>{{item.Story}}</label>
</p>
</div>
<div ng-show='demo.busy'>Loading data...</div>
</div>
</div>
5. PostListController.js代碼如下：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var ftitAppMole = angular.mole('ftitApp', ['infinite-scroll']);
ftitAppMole.controller('PostListController',
function ($scope, Demo) {
$scope.demo = new Demo();
});
// 創建後台數據交互工廠
ftitAppMole.factory('Demo', function ($http) {
var Demo = function () {
this.items = [];
this.busy = false;
this.after = '';
this.page = ;
};
Demo.prototype.nextPage = function () {
if (this.busy) return;
this.busy = true;
var url = "http://...:/api/post/nextpage?id=" + this.page + "&callback=JSON_CALLBACK";
$http.jsonp(url).success(function (data) {
var items = data;
for (var i = ; i < items.length; i++) {
this.items.push(items[i]);
}
this.after = "t_" + this.items[this.items.length - ].id;
this.busy = false;
this.page += ;
}.bind(this));
};
return Demo;
});
這樣就實現了頁面拖動到底後，從伺服器自動載入數據的功能。
PS：AngularJS的載入執行過程
1. HTML頁面的載入，這會觸發載入頁麵包含的所有JS (包括 AngularJS)
2. AngularJS啟動，搜尋所有的指令(directive)
3. 找到ng-app，搜尋其指定的模塊(Mole)，並將其附加到ng-app所在的組件上。
4. AnguarJS遍歷所有的子組件，查找指令和bind命令
5. 每次發現ng-controller或者ng-repeart的時候，它會創建一個作用域(scope)，這個作用域就是組件的上下文。作用域指明了每個DOM組件對函數、變數的訪問權。
6. AngularJS然後會添加對變數的監聽器，並監控每個變數的當前值。一旦值發生變化，AngularJS會更新其在頁面上的顯示。
7. AngularJS優化了檢查變數的演算法，它只會在某些特殊的事件觸發時，才會去檢查數據的更新，而不是簡單地在後台不停地輪詢。
⑵ 「angularjs」怎麼監聽滾動條
如果你是用的jQuery2.0以上版本，還需要修改ng-infinite-scroll.js程序，將所有的將所有的$window.xxx改為$(window).xxx, elem.xxx改為$(elem).xxx。AngularJS 誕生於2009年，由Misko Hevery 等人創建，後為Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有著諸多特性，最為核心的是:MVC、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。
拓展：
1、AngularJS 是一個JavaScript 框架。它是一個以 JavaScript 編寫的庫。它可通過 <script> 標簽添加到 HTML 頁面。AngularJS 通過指令擴展了 HTML，且通過表達式綁定數據到 HTML。AngularJS 是以一個 JavaScript 文件形式發布的，可通過 script 標簽添加到網頁中。
2、AngularJS是為了克服HTML在構建應用上的不足而設計的。HTML是一門很好的為靜態文本展示設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。所以我做了一些工作(你也可以覺得是小花招)來讓瀏覽器做我想要的事。
3、AngularJS試圖成為WEB應用中的一種客戶端的解決方案。這意味著它不只是你的WEB應用中的一個小部分，還是一個完整的客戶端的解決方案。這會讓AngularJS在構建一個CRUD(增加Create、查詢Retrieve、更新Update、刪除Delete)的應用時顯得很"固執"(原文為 opinionated,意指沒有太多的其他方式)。但是，盡管它很"固執"，它仍然能確保它的"固執"只是在你構建應用的起點，並且你仍能靈活變動。
⑶ angularjs中怎樣去除a標簽中的ngclick事件
兩種解決方式： 方式1：升級1.4.4以後版本，該問題已經修復； 方式2： ng-repeat在遍歷對象的時候，會先按照key排序一下……所以，建議你把json中內容改成數組，然後某個欄位作為數組項的一個屬性
⑷ angularjs怎麼監聽input的變化
使用Jquery結合AngulraJs使用的時候，在render完table後，執行一段js腳本，把JqTable應用到該table上，能夠捕獲到AngularJs渲染完成頁面的事件。
要達到這個目的，需要為當前的app自定義directive:
app.directive('onFinishRenderFilters', function ($timeout) {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (scope.$last === true) {
$timeout(function() {
scope.$emit('ngRepeatFinished');
});
}
}
};
});
然後，在需要監控的地方，加上該directive:
<tr ng-repeat="user in users" on-finish-render-filters>
<td>{{user.Id}}</td>
<td>{{user.Name}}</td>
<td>{{user.Salary}}</td>
</tr>
最後，補充上需要render完成之後的Js腳本:
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
//下面是在table render完成後執行的js
var table = $("#leaderBoard").dataTable({
bJQueryUI: true,
"sScrollX": '100%',
});
});