如何在angularjs中添加ui-使用远程数据滚动?
How to add ui-scroll with remote data in angularjs?
我的 angularjs 有问题。我正在尝试添加 ui-scroll 但当我这样做时出现此错误。
可能是因为html调用时数据没有加载
Error: $injector:unpr
Unknown provider: datasourceProvider <-
datasource
这是我的服务
app.factory('actionScroll', function ($http, $timeout,$q) {
return {
default: {
first: 0,
max: 5,
delay: 100
},
data: [],
init: function (donne) {
this.first = this.default.first;
this.max = this.default.max;
this.delay = this.default.delay;
for (var i = this.first; i <= this.max; i++) {
this.data[i] = {
index: i,
content: donne[i]
};
}
},
request: function (index, count) {
var self = this;
var deferred = $q.defer();
var start = index;
var end = index + count - 1;
$timeout(function () {
var item, result = [];
if (start <= end) {
for (var i = start; i <= end; i++) {
if (item = self.data[i]) {
result.push(item);
}
}
}
deferred.resolve(result);
}, self.delay);
return deferred.promise;
}
}
})
这是我的app.js
$scope.list= function () {
$http.get(requestURL).then(function (response) {
actionScroll.init(response.data.Liste)
$scope.datasource = {
get: function (index, count, success) {
console.log('requested index = ' + index + ', count = ' + count);
actionScroll.request(index, count).then(function (result) {
console.log('resolved ' + result.length + ' items');
success(result);
});
}
};
})
}
$scope.list()
这是我的html
<ul class="viewport" ui-scroll-viewport>
<li ui-scroll="item in datasource" adapter="adapter" buffer-size="5">
<span class="title">{{item}}</span>
</li>
</ul>
也许仅当数据可用/从 api:
返回数据时才尝试加载组件
$scope.list= function () {
$scope.isDataLoaded= false;
$http.get(requestURL).then(function (response) {
$scope.isDataLoaded= true
...
})
<ul ng-if="isDataLoaded" class="viewport" ui-scroll-viewport>
<li ui-scroll="item in datasource" adapter="adapter" buffer-size="5">
<span class="title">{{item}}</span>
</li>
</ul>
我的 angularjs 有问题。我正在尝试添加 ui-scroll 但当我这样做时出现此错误。
可能是因为html调用时数据没有加载
Error: $injector:unpr
Unknown provider: datasourceProvider <- datasource
这是我的服务
app.factory('actionScroll', function ($http, $timeout,$q) {
return {
default: {
first: 0,
max: 5,
delay: 100
},
data: [],
init: function (donne) {
this.first = this.default.first;
this.max = this.default.max;
this.delay = this.default.delay;
for (var i = this.first; i <= this.max; i++) {
this.data[i] = {
index: i,
content: donne[i]
};
}
},
request: function (index, count) {
var self = this;
var deferred = $q.defer();
var start = index;
var end = index + count - 1;
$timeout(function () {
var item, result = [];
if (start <= end) {
for (var i = start; i <= end; i++) {
if (item = self.data[i]) {
result.push(item);
}
}
}
deferred.resolve(result);
}, self.delay);
return deferred.promise;
}
}
})
这是我的app.js
$scope.list= function () {
$http.get(requestURL).then(function (response) {
actionScroll.init(response.data.Liste)
$scope.datasource = {
get: function (index, count, success) {
console.log('requested index = ' + index + ', count = ' + count);
actionScroll.request(index, count).then(function (result) {
console.log('resolved ' + result.length + ' items');
success(result);
});
}
};
})
}
$scope.list()
这是我的html
<ul class="viewport" ui-scroll-viewport>
<li ui-scroll="item in datasource" adapter="adapter" buffer-size="5">
<span class="title">{{item}}</span>
</li>
</ul>
也许仅当数据可用/从 api:
返回数据时才尝试加载组件$scope.list= function () {
$scope.isDataLoaded= false;
$http.get(requestURL).then(function (response) {
$scope.isDataLoaded= true
...
})
<ul ng-if="isDataLoaded" class="viewport" ui-scroll-viewport>
<li ui-scroll="item in datasource" adapter="adapter" buffer-size="5">
<span class="title">{{item}}</span>
</li>
</ul>