Question

在ng-repeat中，我希望动态格式化日期，因为用户可以选择更改格式，所以我创建了一个这样的过滤器

<ul>
<li ng-repeat"item in items">
      <h2>{{item.date | formatDate }} </h2>

</li>
</ul>

然后在我的代码中

 myapp.filter('formatDate', function(){
   return function(date) {
     return formatDateFunction(date)
   }
  }

  function formatDateFunction(unix_epoch){

   var date = new Date(unix_epoch);     
   var language = $scope.desiredLanguage
   var time = date.toLocaleTimeString(language, options);
   return time;
  }

   myapp.controller('MyCtrl',[$scope,
        function MyCtrl($scope){
            $scope.desiredLanguage = 'en-us';
            --code omitted

问题是过滤器调用的函数需要在控制器的$ scope上定义的值，以便我当前编写的代码值不可用，即$ scope不可用于format过滤器，也不是它调用的formatDateFunction。

问题：如何在上面的过滤器中访问范围，或者反过来安排它以便<h2>{{item.date | formatDate }} </h2>调用控制器上的过滤器？

Answer 1

您混淆了关注点，你应该提供所需的语言作为过滤器的参数。这意味着您仍然可以将控制器中的desiredLanguage定义为范围变量a la

$scope.desiredLanguage = 'en-us'

但您可以通过HTML将其作为参数传递给过滤器。这意味着您的控制器保持不变，并且您的过滤器变为：

myapp.filter('formatDate', function(){
     return function(date,language) {
           return formatDateFunction(date,language)
     }
}
function formatDateFunction(unix_epoch, language){
     var date = new Date(unix_epoch);     
     var time = date.toLocaleTimeString(language, options);
     return time;
}

然后在你的html中你可以使用：

<h2>{{item.date | formatDate:desiredLanguage }} </h2>

这样可以在控件中保持范围和参数的分离，从而鼓励重用，模块化和可测试性。

访问未在控制器

1 个答案: