AJAX 调用后加载指令
Load directive after AJAX call
我已经构建了一个带有两个参数的分页指令;当前页和总页数。
<pagination page="page" number-of-pages="numberOfPages"></pagination>
问题是我只会在 AJAX 调用后(通过 ng-resource)知道 numberOfPages 的值。但是我的指令在 AJAX 调用完成之前已经呈现。
app.controller('MyController', function ($scope, $routeParams) {
$scope.page = +$routeParams.page || 1,
$scope.numberOfPages = 23; // This will work just fine
MyResource.query({
"page": $scope.page,
"per_page": 100
}, function (response) {
//This won't work since the directive is already rendered
$scope.numberOfPages = response.meta.number_of_pages;
});
});
我更愿意等待 AJAX 调用完成后再渲染我的控制器模板。
B 计划是在 AJAX 调用完成后附加指令模板。
我无法解决这两种情况。
您必须使用 $watch
函数等待值,例如:
<div before-today="old" watch-me="numberOfPages" >{{exampleDate}}</div>
指令
angular.module('myApp').directive('myPagingDirective', [
function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
scope.$watch(attr.watchMe,function(newValue,oldValue){
//check new value to be what you expect.
if (newValue){
// your code goes here
}
});
}
};
}
]);
Imporant: Your directive may use an isolated scope but even so the same principle stands.
如果您使用 ui-router 中的 resolve
,您可以在视图呈现之前将 meta
或 meta.number_of_pages
注入控制器。
//routes.js
angular.module('app')
.state('some_route', {
url: '/some_route',
controller: 'MyController',
resolve: {
meta: ['MyResource', function (MyResource) {
return MyResource.query({
"page": $scope.page,
"per_page": 100
}, function (response) {
return response.meta;
});
}]
}
});
//controllers.js
app.controller('MyController', function ($scope, $routeParams, meta) {
$scope.page = +$routeParams.page || 1,
$scope.numberOfPages = meta.number_of_pages;
});
但是在所有完成之前阻止渲染是不可能的吗
- 我认为 ng-if 会那样做,与 ng-show/ng-hide 相反,它只是改变实际显示
我已经构建了一个带有两个参数的分页指令;当前页和总页数。
<pagination page="page" number-of-pages="numberOfPages"></pagination>
问题是我只会在 AJAX 调用后(通过 ng-resource)知道 numberOfPages 的值。但是我的指令在 AJAX 调用完成之前已经呈现。
app.controller('MyController', function ($scope, $routeParams) {
$scope.page = +$routeParams.page || 1,
$scope.numberOfPages = 23; // This will work just fine
MyResource.query({
"page": $scope.page,
"per_page": 100
}, function (response) {
//This won't work since the directive is already rendered
$scope.numberOfPages = response.meta.number_of_pages;
});
});
我更愿意等待 AJAX 调用完成后再渲染我的控制器模板。
B 计划是在 AJAX 调用完成后附加指令模板。
我无法解决这两种情况。
您必须使用 $watch
函数等待值,例如:
<div before-today="old" watch-me="numberOfPages" >{{exampleDate}}</div>
指令
angular.module('myApp').directive('myPagingDirective', [
function () {
return {
restrict: 'A',
link: function (scope, element, attr) {
scope.$watch(attr.watchMe,function(newValue,oldValue){
//check new value to be what you expect.
if (newValue){
// your code goes here
}
});
}
};
}
]);
Imporant: Your directive may use an isolated scope but even so the same principle stands.
如果您使用 ui-router 中的 resolve
,您可以在视图呈现之前将 meta
或 meta.number_of_pages
注入控制器。
//routes.js
angular.module('app')
.state('some_route', {
url: '/some_route',
controller: 'MyController',
resolve: {
meta: ['MyResource', function (MyResource) {
return MyResource.query({
"page": $scope.page,
"per_page": 100
}, function (response) {
return response.meta;
});
}]
}
});
//controllers.js
app.controller('MyController', function ($scope, $routeParams, meta) {
$scope.page = +$routeParams.page || 1,
$scope.numberOfPages = meta.number_of_pages;
});
但是在所有完成之前阻止渲染是不可能的吗
- 我认为 ng-if 会那样做,与 ng-show/ng-hide 相反,它只是改变实际显示