如何刷新列表以从服务获取新数据

How to refresh the list to get new data from service?

本文关键字：获取 服务 数据 新数据 列表 何刷新 刷新      更新时间：2023-09-26

我正在尝试调用web服务，从中接收数据并显示在列表中。我正在使用指令。

  • 当我的小提琴加载时，我从JSON加载数据。它运行良好。我能够加载数据
  • 然后单击"删除"按钮，我的列表为空。换句话说，我从列表中删除了所有项目。哪个运行良好
  • 现在，当我单击刷新按钮时，我需要再次调用服务并从服务中获取新数据

但它并没有显示在列表中，为什么？这是我的代码：https://jsfiddle.net/8fjhLqnw/10/

.controller('he', function($http, $scope, sharedData) {
    var h = this;
    h.referesh=function(){
        sharedData.get();
    }
    h.delete = function() {
        sharedData.delete()
    }
});

更新请参阅plunker

http://plnkr.co/edit/iMpStNneDmIsabTnFqpP?p=preview

我只需要点击刷新按钮，就可以加载data.json的数据，并在列表表单

上显示

更新的fiddle

问题是您正在刷新刷新调用中对sharedData.data的引用。f控制器在刷新数据之前将自己绑定到sharedData.data（即vm.data=sharedData_data），并且该vm.data引用从不更新（始终指向原始删除的数组）。要修复此问题，请构建对sharedData本身的引用，并从模板中访问内部的数据属性：

// continued off module definition
.directive('tm', function() {
    // reference vm.sharedData.data in the template
    return {
        restrict: 'E',
        template: '<div><ul><li ng-repeat="n in vm.sharedData.data">{{n.name}}</li></ul></div>',
        scope: {},
        controller: 'f',
        controllerAs: 'vm'
    };
}).controller('f', function($http, $scope, sharedData) {
    var vm = this;
    // initialize shared data
    sharedData.get().then(function(){
    vm.sharedData = sharedData;
    });

刷新数据时，sharedData的数据属性将重置并由模板拾取，因为作用域引用sharedData引用（不会更改）。该模板将看到sharedData（刷新的数据属性）内部的任何更改。

相关文章：