元素加载到DOM后运行jPager jquery插件。
标签加载到itemContainer中,然后jQuery对数据进行分页。
我需要运行一个指令,在一个http调用将
jquery工作正常,但我不能得到指令后运行屏幕渲染(它只是运行之前,因此范围是空的)
我已经尝试使用$emit和$broadcast demo's,但仍然不能让它着火。
作用域将
<div wss-pager class="holder"></div>
<ul id="itemContainer" ng-bind-html="ctData"></ul>
////
function loadData() {
$http({
method: 'GET',
url: 'api/getMyData',
}).
success(function(data, status, headers, config) {
// deferred.resolve(data);
$scope.ctData = data.m_StringValue;
//
$scope.$emit('UpdateJPages');
}).
error(function(data, status, headers, config) {
alert("error" + data);
$scope.ctData= "";
});
};
/////////
angular.module('app').directive("wssPager", [function () {
return {
restrict: "A",
link: function (scope, elem, attrs) {
scope.$on('UpdateJPages', function() {
$("div.holder").jPages({
containerID: "itemContainer",
perPage: 5,
startPage: 1,
startRange: 1,
midRange: 5,
endRange: 1
});
});
使用ng-if
如果cData在调用之前是空的,像这样使用:
<div wss-pager class="holder" ng-if="ctData"></div>
如果没有,你可以有一个额外的变量,例如loaded
<div wss-pager class="holder" ng-if="loaded"></div>
function loadData() {
$scope.loaded = false;
$http({
method: 'GET',
url: 'api/getMyData'
})
.success(function(data, status, headers, config) {
// deferred.resolve(data);
$scope.ctData = data.m_StringValue;
$scope.loaded = true
$scope.$emit('UpdateJPages');
})
.error(function(data, status, headers, config) {
alert('error' + data);
$scope.ctData= '';
});
};
好的,我已经找到了一个工作围绕感兴趣的人。也许不是最好的答案,但它已经解决了问题。
我已经使用$timeout函数来启用屏幕渲染。
$timeout(function () {
$scope.$emit('UpdateJPages');
});