promisejs中的promisejs更改未反映在HTML中

时间:2016-12-09 19:52:24

标签: javascript html angularjs

我正在使用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

0 个答案:

没有答案