我正在尝试编写一些搜索输入,以使用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', function($scope, 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,您必须找到其他方法。
一个干净但漫长的解决方案将是使用服务在控制器中共享变量。
要在评论中回答问题:
我可以看到它已更新,但视图仍显示旧数据
我想是什么问题(即使我实际上没有看到您的代码)。
如果您这样绑定var:
服务
[...] service.serviceVar = 1; return service [...]
这将创建一个带有引用的“ 1”变量。
控制者
[...] $scope.myvar = Service.serviceVar; [...]
这会将$ scope.myvar绑定到“ 1”引用。
如果在服务或其他控制器中执行此操作:
service.serviceVar = 2;
您将使用新引用创建一个新的变量“ 2”,并将该引用分配给service.serviceVar。严重的是,您对旧的1 var的所有旧引用都不会更新。
为了避免这种情况,请执行以下操作:
[...] service.servicevar = {}; service.servicevar.value = 1; return service [...]
使用新引用创建一个对象,并将其分配给servicevar。您创建一个变量“ 1”,并将其分配给servicevar.value。
[...] $scope.myvar = Service.servicevar; [...]
您将servicevar引用分配给您的范围var。
视图
{{myvar.value}}
您可以通过使用var的属性来使用该值。
更新var这样做:
service.servicevar.value = 2;
您将使用新参考创建新的变量“ 2”,并用该参考替换旧参考。
但是这次您将所有对servicevar的引用保留在控制器中。
我希望我很清楚,它可以回答您的问题。
编辑:
尝试永远不要使用$ scope。$ apply。这是一个非常糟糕的做法。如果您使用它来使某些东西起作用,那么您可能应该找到另一个来做到这一点(这对Stacks来说是一个很大的问题,我想:“为什么我需要$ apply解决我的问题XXXXX”)
rsnorman15关于您使用异步调用有一个很好的观点。也看看他的答案。
这是我使用服务共享房屋的老手之一