我已达到一个完整的阻止,并且可以真正使用一些洞察力来确定我在这里做错了什么。我在顶部有一个搜索栏,在它下面有一个视图区域来加载不同的模板。当index.html加载时,SearchController(在search-controller.js中)加载并等待提交。平均时间ng-view加载-day.html,它利用DailySearchController(在daily-search-controller.js中)来填充当天的数据。 DailySearchController和SearchController都共享相同的服务(search-service.js)。到目前为止,数据填充并且一切都很顺利。
现在,当我在输入字段中输入数据并点击提交时,client-search.html模板加载到视图(最多),表单数据射到控制器,然后到服务(这似乎是到目前为止还好,然后回到控制器,我现在遇到问题。我可以在chrome addon Batarang中看到json数据确实到达我的$ scope对象,但它只是没有更新视图。
的index.html
<html ng-app="MM">
...//everything included
<body>
<form ng-controller="SearchController" ng-submit="mmSubmitSearch()" class="submit-main" id="submitMain">
<input ng-model="mmMdlSearchBox" class="mdl-search-box" id="mdlSearchBox" placeholder="find your quote..." type="text">
</input>
<input type="submit" class="btn-submit" id="btnSubmit" value="Search"></input>
</form>
<div ng-view></div>
</body>
</html>
客户search.html
<ul class="ul-query">
<li class="li-header"> QUOTE RESULTS...</li>
<li ng-repeat="resource in mmClientReq.quotes | orderBy:clientList" class="li-resource">
<p class="p-resource">{{resource.quote}}</p>
<p class="p-resource-link">
<a class="a-link" href="#/resource/search/link/version/{{resource.version}}/book/{{resource.book}}/chapter/{{resource.chapter}}"> Ch {{resource.chapter}}:{{resource.verse}}</a>
{{resource.book}}, {{resource.version}}
</p>
</li>
</ul>
的最day.html
<ul class="ul-query">
<li class="li-header"> SOURCE OF THE DAY</li>
<li ng-repeat="resource in mmClientReqDaily.quotes | orderBy:clientList" class="li-resource">
<p class="p-resource">{{resource.quote}}</p>
<p class="p-resource-link">
<a class="a-link" href="#/resource/search/link/version/{{resource.version}}/book/{{resource.book}}/chapter/{{resource.chapter}}"> Ch {{resource.chapter}}:{{resource.verse}}</a>
{{resource.book}}, {{resource.version}}
</p>
</li>
</ul>
日用搜索controller.js
angular.module('MM.ControllerModule')
.controller('DailySearchController', ['$http', '$scope', 'SearchService',
function ($http, $scope, SearchService) {
getDailyReq();
function getDailyReq() {
SearchService.getDailyReq()
.success(function(data) {
$scope.mmClientReqDaily = data;
})
.error(function(data) {
...
});
};
}]);
搜索controller.js
angular.module('MM.ControllerModule')
.controller('SearchController', ['$scope', '$location', 'SearchService',
function ($scope, $location, SearchService) {
$scope.mmSubmitSearch = function() {
var userData = this.mmMdlSearchBox;
$location.path('/resource/search');
SearchService.getSearch(userData)
.success(function(data) {
$scope.mmClientReq = data;
})
.error(function(data) {
...
});
};
}]);
搜索service.js
angular.module('MM.ServiceModule')
.service('SearchService', ['$http', '$location',
function ($http, $location) {
var searchBaseURL = ('/resource/search/client-search?text=');
this.getDailyReq = function() {
return $http.get($location.path());
};
this.getSearch = function(searchURL) {
return $http.get(searchBaseURL + searchURL);
}
}]);
在视图中加载client-search.html模板,但只显示标题,不显示其他所有内容。
答案 0 :(得分:1)
我对正在发生的事情的解决方案只是创建另一个控制器来显示数据。搜索栏控制器从视图中获取数据并将其存储在服务中。分配给the-day.html的新控制器会抓取服务中存储的数据并显示它。
我认为这是处理这种情况的更好方法,以防止搜索控制器管理主页面和模板。谢谢大家的意见。