角JS指令在rest调用后没有更新。

I am having trouble with angularjs when after retrieving data from a rest service.

我在从rest服务中检索数据时遇到了问题。

I am currently using the code from this SO question enter link description here to display my data.

我目前使用的代码从这个问题输入链接描述这里显示我的数据。

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

To get data from my rest service, I use this code:

为了从rest服务中获取数据，我使用以下代码:

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

I can retrieve the code data but for some reason, the in my html is not being updated after the data is received. It's as if the two way data binding is broken.

我可以检索代码数据，但是由于某些原因，在接收到数据后，我的html中的内容没有被更新。就好像两种方式的数据绑定被破坏了一样。

By the way, if I use ng-repeat on a list, it works.

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

This is what's on my html:

这是我的html文件:

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

1 个解决方案

#1

There are a couple of issues with your code. The first is the way you declared the rows attribute in the directive. Currently it is just a string value. Here's how to fix your code:

您的代码有几个问题。第一个是在指令中声明row属性的方式。目前它只是一个字符串值。下面是如何修复代码的方法:

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

Here we are deferring the execution of the directive until our AJAX call has finished using ng-if. Next the directive declaration:

在这里，我们将推迟指令的执行，直到使用ng-if完成AJAX调用。下一个指令声明:

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

Notice the scope: { rows: '=' } which allows for passing complex parameters from the parent scope to the directive and not just string values as in your example.

请注意作用域:{rows: '='}，它允许将复杂参数从父作用域传递给指令，而不像示例中那样只传递字符串值。

Once the link function is executed you can use scope.rows variable which will contain the actual data retrieved from your $resource.

一旦执行了链接函数，就可以使用范围。行变量，它将包含从$resource检索到的实际数据。

#1