Question

从休息服务中检索数据后，我遇到了angularjs的问题。

我目前正在使用此问题enter link description here中的代码来显示我的数据。

myApp.directive('myTable', function () {
return {
    restrict: 'E',
    link: function (scope, element, attrs) {
        var html = '<table>';
        angular.forEach(scope[attrs.rows], function (row, index) {
            html += '<tr><td>' + row.name + '</td></tr>';
            if ('subrows' in row) {
                angular.forEach(row.subrows, function (subrow, index) {
                    html += '<tr><td>' + subrow.name + '</td></tr>';
                });
            }
        });
        html += '</table>';
        element.replaceWith(html)
    }
}
});

要从我的休息服务中获取数据，我使用以下代码：

app.factory("Entry", function($resource) {
        return $resource("/path/to/api:id");
    }); 

    app.controller("PostIndexCtrl", ['$scope', 'Entry', function($scope, Entry) {
        $scope.entries =[];
        Entry.query(function(data) {
    $scope.entries = data;
        });
    }]);

我可以检索代码数据但由于某种原因，我的html在收到数据后没有更新。就像双向数据绑定被打破一样。

顺便说一句，如果我在列表中使用ng-repeat，它就可以了。

这就是我的html：

<my-table rows='entries'></my-table>

Answer 1

您的代码存在一些问题。第一种是在指令中声明rows属性的方式。目前它只是一个字符串值。以下是修复代码的方法：

<my-table ng-if="entries.length>0" rows="entries"></my-table>

这里我们推迟执行指令，直到我们的AJAX调用使用ng-if完成。接下来是指令声明：

app.directive('myTable', function () {
    return {
        restrict: 'E',
        scope: { rows: '=' },
        link: function (scope, element, attrs) {
            // At this stage you can use the scope.rows value
            // which will contain the result from your AJAX call
        }
    };
});

注意scope: { rows: '=' }允许将复杂参数从父作用域传递到指令，而不仅仅是示例中的字符串值。

执行link功能后，您可以使用scope.rows变量，其中包含从$resource检索到的实际数据。

休息调用后没有更新Angular JS指令

1 个答案: