Question

在我的HTML模板中，我有以下内容：

<a ng-href="{{ person | personLink }}">

person在控制器中设置为：

$scope.person = Person.get({examId: $routeParams.personId});

和Person是一种资源：

  app.factory('Person', [
    '$resource', function($resource) {
      return $resource('/api/people/:personId/', {
        personId: '@personId'});
    }
  ]);

问题是在promise准备好之前调用过滤器并导致读取未定义的值。处理这个问题的正确方法是什么？

现在我使用if检查属性，但这似乎并不理想：

renderFilters.filter('personLink', function() {
  return function(person) {
    if(person.ages) {
        return '#/ages/' + person.ages;
    }else{
        return '#';
    }
  };
});

Answer 1

可以访问承诺，如：

    Person.get({examId: $routeParams.personId}).$promise.then(function(p) {
                   $scope.person = p; 
      });

但是你的问题似乎是过滤器的问题而不是承诺。由于它是数据绑定表达式的一部分，因此在初始化期间将使用空值调用它。

考虑一个测试用例，其中Person.get被传递给不在数据库中的personid。您仍会收到未定义的错误。我不确定这是否可以通过访问承诺来解决。您可能仍需要在过滤器中处理它。我会将过滤器中的if条件更改为：

    if(person)
       return '#/ages/' + person.ages;
    else
       return "#";

另一种选择是使用控制器init中的一些虚拟数据初始化person对象。像：

     $scope.person={"ages":"#"};

我认为这不是一个干净的解决方案。

Answer 2

＆＃34;正确＆＃34;方法是使用ng-if在数据准备好之前保持元素不显示。不是在您的JS中，而是在您的HTML中。基本上就是这样。这可以根据您期望的实施情况进行微调，因此如果您想要特别的东西，请告诉我们您的目标是什么。

在HTML模板中过滤AngularJS Promises

2 个答案: