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值是ALREADY正确的值，即它已被设置。但是，在指令上，模板：

<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;
                }
            });
        },

在ajax请求之后设置指令数据

1 个答案: