我正在使用AngularJS来构建Web应用程序。 我编写了一个服务,其中包含一个名为getMatchedMenuItems(searchTerm)的方法 此方法的目标是连接到REST API,检索数据,处理它(根据searchTerm),并返回promise对象。 在控制器中,我调用此方法并尝试更新状态变量,该变量用于指令模板的ng-if属性。 这是服务代码:
function MenuSearchService($http, $q){
var service = this;
service.getMatchedMenuItems = function(searchTerm){
var deferred = $q.defer();
if(searchTerm){
$http(...)
.then(function(response){
//process data
var returnItem = {
items: foundItems,
status: true
}
deferred.resolve(returnItem);
});
}
else{
var error = {
message: 'Search term is empty',
status: false
};
deferred.reject(error);
}
return deferred.promise;
}
}
这是控制器:
function NarrowItDownController(MenuSearchService){
var ctrl = this;
ctrl.getSearchedItems = function(){
MenuSearchService.getMatchedMenuItems(ctrl.searchTerm)
.then(function(data){
ctrl.found = data.items;
ctrl.status = data.status;
}, function(error){
alert(error.message);
ctrl.status = error.status;
});
};
ctrl.onRemove = function(index){
ctrl.found.splice(index, 1);
};
}
这是指令
function FoundItems(){
var ddo = {
templateUrl: 'foundItems.html',
scope: {
found: '<',
onRemove: '&'
}
};
return ddo;
}
指令foundItems.html模板
<div ng-if="ctrl.status">
<h3>Title</h3>
<ul>
<li ng-repeat="item in ctrl.found">
{{ item.name }}
<button type="button" ng-click="ctrl.onRemove({index: $index});">Don't want this one!</button>
</li>
</ul>
</div>
在index.html中使用模板
<found-items found="ctrl.found" on-remove="ctrl.removeItem(index)" ng-if="ctrl.dataAvailable">
</found-items>
代码有什么问题? ctrl.status变量的值会更新,但该更改不会反映在html
中