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

Question

我目前遇到指令问题，而当指令尝试访问父控制器中设置的某些范围值时，这些值并未设置。这是因为在 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 = {

查看（玉）代码：

blur-gallery(gallery-items)

控制器代码：

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

                        $scope.isDataLoaded = true;
                    });

如您所见，控制器请求服务检索数据并设置 $scope.task 变量，但指令试图在它返回之前访问它（如您在 [=28= 中看到的那样） ]).

谢谢

Answer 1

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

例如：

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

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

Angular directive being called before AJAX call populates data

directive

angularjs

pug