angularjs - 在 AJAX 调用填充数据之前调用 Angular 指令

Question

我目前遇到一个指令问题，而当指令尝试访问父 Controller 中设置的某些范围值时，这些值并未设置。这是因为该指令是在 AJAX 调用返回任何数据之前调用的。有没有什么可以让我的指令等待此数据设置后再继续？

这是我的指令:

return {
                restrict: 'E',
                //scope: {},
                templateUrl: window.baseUrl + '/template-common/directives/blurGallery',
                // -------------------------------------------------------------
                link: function(scope, element, attrs) {

                    var $gallery = $('body').find('.the-gallery'),
                        $item = $gallery.find('.preview-content');

                    console.log($scope.tasks);

                    scope.gallery = {

查看( Jade )代码:

blur-gallery(gallery-items)

Controller 代码:

//Get task details
                PPTaskService.loadTaskDetails($scope.theTaskId)
                    .then(function(response) {
                        $scope.task = new TaskWrapper(response);

                        $scope.isDataLoaded = true;
                    });

如您所见， Controller 要求服务检索数据并设置 $scope.task 变量，但指令在返回之前尝试访问此变量(如您在 console.log 中看到的那样)。

谢谢

Answer 1

在指令中，使用 scope.$watch()在 scope.task 或 scope.isDataLoaded 上，在数据可用时收到通知。从那里，继续执行您的指令逻辑。

例如:

scope.$watch('isDataLoaded', function(newValue, oldValue) {
    if (newValue === true)
    {
        /* do stuff with data */
    }
});