javascript - AngularJS:在指令的链接函数中观察异步值

Question

我正在使用 ng-grid 进行数据显示，我想根据返回结果的数量和用户的显示器分辨率动态调整网格本身的高度。

这是 Angular 代码:

angular.module('modulename', [])

    .controller('ctrl', function($scope, $http) {

        $scope.gridResult = [];

        $scope.gridOptions = {
           data: 'gridResult'
        };

        $scope.listData = function() {
            //Async call using $http.get which on success callback asigns response.data to $scope.gridResult
        }

        //Get data when page loads
        $scope.listData();

    })

    .directive('tableheight', function() {
        return {
            restrict: 'A',
            scope: {

            },
            controller: 'ctrl',
            link: function(scope, elem, attrs) {
                scope.$watchCollection('gridResult', function(n, o) {
                    console.log(n); //Shows empty array
                    if (n.length > 0) {
                        console.log(n) //Never displayed

                        //Calculate new size for the grid
                        ...
                    }
                });
            }
        };
    });

HTML 部分:

<div data-ng-grid="gridOptions" tableheight></div>

如您所见，即使在“listData”成功回调之后，“gridResult”始终为空数组。如果我将整个 $watchCollection 方法移动到 Controller 主体，一切都会按预期工作。我想要实现的是在渲染 DOM 之后以某种方式运行指令的链接函数，其中包括来自异步调用的渲染数据。

我想我在这里做错了什么或者我的方法是错误的，但是如果有人可以为此提供解决方案，我将不胜感激。

关于在 DOM 呈现并准备就绪后调用指令的链接函数的主题，我尝试将代码放入 Angular $timeout 中，延迟为 0，但这对我没有任何作用。说到这个，有没有什么方法可以在 DOM 渲染后调用指令的链接函数，因为我相信我的一些问题来自这个问题？

Answer 1

刚才 Controller 和指令之间没有通信。 Here您会发现如何组织此类通信的基本场景。

最安全和通用的选择是像这样创建数据绑定(bind):

angular.module('modulename', [])

.controller('ctrl', function($scope, $http) {

    $scope.gridResult = [];

    ...
})

.directive('tableHeight', function() {
    return {
        require: 'dataGrid', // it would be better to use this directive only alongside data-grid
        restrict: 'A',
        scope: {
            gridResult: '=tableHeight' 
        },
        // controller: 'ctrl', this is unnecessary -- it points to directive's controller
        link: function(scope, elem, attrs) {
            scope.$watchCollection('gridResult', function(n, o) {
                ...
            });
        }
    };
});

<div data-ng-grid="gridOptions" table-height="gridResult"></div>