Question

使用控制器方法搜索后无法更新模板。

如果没有执行搜索，我有一个控制器将数据列表模板。从服务中检索数据。

当我按月搜索并在调用搜索方法后生成结果。在console.log中的是正确的数据，但是html模板没有显示此数据，它显示了未过滤的数据。

我尝试返回$ scope.data或scope.apply，它不起作用。

如何使用过滤后的数据更新模板？

带有搜索方法的控制器：

.controller('AcpCtrl', function($scope, ApiAcpFactory, $ionicLoading, $timeout, $http) {  
  $scope.data = null;
  $ionicLoading.show({noBackdrop: true,template: '<p>Searching ...</p>'});
  ApiAcpFactory.getApiData()
    .then(function(result) {      
        var acp = {};
        acp.resultdata = [ result ];      
        $scope.data = acp.resultdata;      
        $ionicLoading.hide();
   })

   $scope.search = function(data) {
        $scope.data = null;
        $scope.formData = {};
        $scope.formData.month = data.month;
        $scope.formData.origin  = data.origin;
        $ionicLoading.show({noBackdrop: false,template: '<p>Searching</p>'});        
        ApiAcpFactory.getApiData($scope.formData)
        .then(function(result) {             
            $scope.data = JSON.stringify(result);
            console.log(' scope.data '+$scope.data);      
            $ionicLoading.hide();
       })
        return $scope.data;
    }
})

工厂：

.factory('ApiAcpFactory', function($http, $q, ApiAcpEndpoint) { 
  var getApiData = function(data) {    
    var q = $q.defer();    
    $http.post(ApiAcpEndpoint.url,data)
    .success(function(data) {
        q.resolve(data);
    })
    .error(function(error){
        console.log('Had an error'+error)
        q.reject(error);
    })
    return q.promise;
  }
  return {
    getApiData: getApiData    
  };

})

Answer 1

我很确定原因是您的更改发生在延迟回调中。因此，Angular没有注意到它在循环中发生转变。

你说你试过$ apply，你能发布你试过的吗？

在这种情况下，这将是正确使用：

$scope.$apply(function(){    
  $scope.data = acp.resultdata;  
});

这一切都很好地解释了here：）

希望有所帮助：）

调用angularjs控制器方法后模板不更新

1 个答案: