Угловая директива JS не обновляется после переадресации

Question

У меня возникают проблемы с angularjs, когда после извлечения данных из службы отдыха.

В настоящее время я использую код из этого вопроса SO 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.