ajax请求后设置指令数据

Question

在我的页面控制器中，我使用 ngResource 从 ajax 调用中获取数据：

clientResource.query(
    {
        searchText: vm.search.text,
        pageSize: vm.pageSize
    },
    (data, headers) => {
        vm.clients = data;
        vm.headers = JSON.parse(headers("X-Pagination"))
        // ...

我有一个简单的分页指令：

<ix-pager headers="vm.headers"></ix-pager>

在指令控制器中，我有：

function ixPagerController($scope) {
    var vm = this;
    vm.headers = $scope.headers;
}

现在当指令渲染并且指令控制器触发时，$scope.headers 是undefined，这是因为 AJAX 调用还没有返回。但是当它这样做并且设置了vm.headers 时，这不会更新指令上的模型。所以我可以更改我的指令以使用带有 watch 语句的链接函数，如下所示：

return {
    templateUrl: "/app/partials/pager.html",
    restrict: "E",
    controller: ixPagerController,
    controllerAs: "vm",
    replace: true,
    link: function (scope, element, attrs) {
        scope.$watch("headers", function (newValue, oldValue) {
            if (newValue) {
                //scope.headers = newValue;           
            }
        });
    },
    scope: {
        headers:"="
    }
}

问题是，在注释掉的行中，如果我设置断点，scope.headers 值已经是正确的值，即它已经被设置。但是，在指令上，模板：

<pre>{{vm.headers|json}}</pre>

仍然什么也没显示。就好像缺少摘要或其他东西一样。如何让模型上的指令正确更新视图？

Answer 1

这似乎可行：

        link: function (scope, element, attrs, ctrl) {
            var c = ctrl;
            scope.$watch("headers", function (newValue, oldValue) {
                if (newValue) {
                    c.headers = newValue;
                }
            });
        },