angularjs – 更改模型后ngRepeat不更新

前端之家收集整理的这篇文章主要介绍了angularjs – 更改模型后ngRepeat不更新前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想编写一些搜索输入来使用ngResource从数据库获取数据.

数据显示在带有ng-repeat的页面中,但是当我执行搜索并且$scope已更新时,视图不会更新并显示旧数据.

这是代码

main.html(活动视图)

<div ng-controller="searchCtrl as searchCtrl" layout="column">
    <form class="form-inline search-form col-md-offset-1">
        <div class="form-group col-md-5">
            <label class="sr-only" for="search_location">Location</label> <input
                id="search_location" type="search" class="form-control"
                ng-Autocomplete ng-model="place" placeholder="Location" />
        </div>
        <div class="form-group col-md-5">
            <label class="sr-only" for="search_tags">Tags</label> <input
                style="width: 100%;" id="search_tags" type="search"
                class="form-control" id="search_tags" placeholder="Tags">
        </div>

        <div class="col-md-1">
            <md-button class="md-fab md-mini" aria-label="Search" ng-click="searchCtrl.search()"> <md-icon class="md-fab-center"
                md-font-icon="glyphicon glyphicon-search" style="color: black;"></md-icon>
            </md-button>
        </div>
    </form>
</div>

<div ng-controller="mainCtrl">

    <div ng-repeat="evento in eventi" ng-include="'views/components/event_card.html'" class="col-md-3"></div>

</div>

main.js

'use strict';
app.factory('Eventi',function($resource) {
    return $resource('/eventsws/events/:location',{location : '@location'},{ 
        search: {
            method: 'GET',params: {
                'location' : "@location"
            },isArray : true
        }
    })
});

app.controller('mainCtrl',function($scope,Eventi) {
    $scope.eventi = Eventi.query();
});

searchbar.js

'use strict';
app.controller('searchCtrl',Eventi) {
    $scope.place = null;

    this.search = function() {

        $scope.eventi = Eventi.search({
            'location' : $scope.place
        });
    }
});

当它启动时从数据库获取所有数据并正确显示它们,当我尝试进行搜索时,$scope.eventi被更新(我可以从调试中查看$scope.eventi中的新数据)但是视图仍显示旧数据,永不更新.

我试过在搜索功能结束时使用$scope.$apply但结果是一样的.

你知道它为什么不起作用吗?

谢谢你的时间.

您在调试中看到的$scope.eventi是searchCtrl中的那个,而不是mainCtrl中的那个.要更新mainCtrl $scope.eventi,您必须找到另一种方法.

一个干净但很长的解决方案是使用服务来共享控制器中的变量.

要在评论中回答这个问题:

i can see it updated,but the view still show the old data

我猜是什么问题(即使我实际上没有看到你的代码).

问题

如果你像这样绑定你的var:

服务

[...]
service.serviceVar = 1;
return service
[...]

这将创建带引用的“1”var.

调节器

[...]
  $scope.myvar = Service.serviceVar;
  [...]

这会将$scope.myvar绑定到“1”引用.

如果您在服务中或在其他控制器中执行此操作:

service.serviceVar = 2;

您将使用新引用创建一个新的var“2”,并将此引用分配给service.serviceVar.所有旧的1 var的旧引用都不会更新.

为了避免这样做,请执行以下操作:

服务

[...]
service.servicevar = {};
service.servicevar.value = 1;
return service
[...]

您使用新引用创建对象并将其分配给servicevar.
您创建一个var“1”并将其分配给servicevar.value.

调节器

[...]
$scope.myvar = Service.servicevar;
[...]

您将servicevar引用分配给范围var.

视图

{{myvar.value}}

您可以使用var的属性来使用该值.

更新var执行此操作:

service.servicevar.value = 2;

您将使用新引用创建一个新的var“2”,并将此引用替换为旧引用.

但是这次你在控制器中保留对servicevar的所有引用.

我希望我很清楚,它会回答你的问题.

编辑:

尽量永远不要使用$scope.$apply.这是一个非常糟糕的做法.如果你使用它来使某些东西有用,你应该找到另一个可以做到这一点(而且对于Stacks来说这将是一个很好的问题我猜:“为什么我需要$申请来解决我的问题XXXXX”)

rsnorman15对你使用异步调用有一个很好的观点.看看他的答案也是如此.

这是我的一个old plunker使用服务来共享属性

原文链接:https://www.f2er.com/angularjs/143601.html

猜你在找的Angularjs相关文章