Angularjs $scope未从控制器更新我的视图
我已经到了一个完全的街区,我真的可以用一些洞察力来判断我在这里可能做错了什么。我在顶部有一个搜索栏,在它下面有一个视图区域来加载不同的模板。加载index.html时,SearchController(在search controller.js中)将加载并等待提交。同时,ng view加载了of-the-day.html,它利用DailySearchController(在DailySearchController.js中)来填充一天中的数据。DailySearchController和SearchController共享相同的服务(search service.js)。到目前为止,数据已填充,一切正常 现在,当我在输入字段中输入数据并点击提交时,client-search.html模板将加载到视图中(最多),表单数据将发送到控制器,发送到服务(到目前为止似乎还可以),然后返回到控制器,我现在遇到了问题。在chrome插件Batarang中,我可以看到json数据确实到达了我的$scope对象,但它只是没有更新视图 index.htmlAngularjs $scope未从控制器更新我的视图,angularjs,angularjs-scope,angularjs-ng-repeat,Angularjs,Angularjs Scope,Angularjs Ng Repeat,我已经到了一个完全的街区,我真的可以用一些洞察力来判断我在这里可能做错了什么。我在顶部有一个搜索栏,在它下面有一个视图区域来加载不同的模板。加载index.html时,SearchController(在search controller.js中)将加载并等待提交。同时,ng view加载了of-the-day.html,它利用DailySearchController(在DailySearchController.js中)来填充一天中的数据。DailySearchController和Sear
<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-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) {
...
});
};
}]);
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) {
...
});
};
}]);
search-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模板在视图中加载,但仅显示标题,其他所有内容均不显示 我的解决方案就是创建另一个控制器来显示数据。搜索栏控制器从视图中获取数据并将其存储在服务中。分配给of-The-day.html的新控制器将获取并显示服务中存储的数据
无论如何,我认为这是处理这种情况的更好方法,因为这样可以防止搜索控制器同时管理主页和模板。谢谢大家的意见 我不是很确定,但你可能会成为模型中的点的牺牲品。尝试将所有数据添加到$scope.myModel而不是$scope。或者显式地将数据属性添加到$scope中,以便Angular知道它已更改。您是否有可能删除此属性以便我可以使用它?(或者摆弄一下,这样我就可以把它放进去)你可以试试
$scope.$apply
来触发摘要周期。感谢大家这么快的响应。卡斯彭斯:我明白你的意思,但我不理解你对你建议的实施。您是否介意指出可以在何处(包括$scope.model和显式)添加这些内容?
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) {
...
});
};
}]);
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);
}
}]);