Question

我想在我视图中从函数中提取的变量上使用日期过滤器。但是，我不断收到以下错误消息：

Error: [$parse:syntax] Syntax Error: Token '|' is unexpected, expecting [)] at column 201 of the expression [nextStep(3); 
                    sendMessage('xxx', 'xxx', 
                    'Thanks. Your appointment with ' + selectedBusiness.name + ' has been booked for ' + convertDate(booking.date) | date:'fullDate' + ' at ' + booking.time ) + '.'] starting at [| date:'fullDate' + ' at ' + booking.time ) + '.'].

有什么替代方案？到目前为止，这是我的代码。

<a ng-click="sendMessage('xxx', 'xxx', 
'Thanks. Your appointment with ' + selectedBusiness.name + 
  ' has been booked for ' + convertDate(booking.date) | date:'fullDate' + 
  ' at ' + booking.time ) + '.'">Pay</a>

Answer 1

这看起来像模板中的大量逻辑。你不能把它移到控制器上吗？

＆＃13;

angular.module('myApp', [])

.controller('MainController', ['$scope', 'dateFilter', 'MessageService',
  function($scope, dateFilter, MessageService) {
    // Don't know where these come from so just mocking out
    $scope.selectedBusiness = {
      name: 'ACME'
    };
    $scope.booking = {
      date: '12/31/2016',
      time: '12:00:00PM'
    };

    // handle logic of assembling message here in the controller.
    // can also be unit tested
    $scope.handlePay = function handlePay(selectedBusiness, booking) {
      var convertedDate = dateFilter(new Date(booking.date), 'fullDate');
      var msgText = 'Thanks. Your appointment with ' + selectedBusiness.name +
        ' has been booked for ' + convertedDate +
        ' at ' + booking.time + '.';

      // hand off to MessageService sendMessage (note: this method could just as easily be on the controller, but sending a message
      // seems like it would be shared functionality
      MessageService.sendMessage('xxx', 'xxx', msgText);
    }
  }
])

.service('MessageService', [
  function MessageService() {
    this.sendMessage = function sendMessage(param1, param2, msgText) {
      // use logic to send message
      alert(msgText);
    }
  }
]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MainController">
  <a href="#" ng-click="handlePay(selectedBusiness, booking)">Pay</a>
</div>

＆＃13;

编辑：关于您的原始帖子无法正常运作的原因。我注意到括号不匹配，并且需要在日期过滤器周围添加一组括号。我仍然会推荐控制器路径，但如果你想保留它，那么这里是你修改过的模板（注意将右括号移到最后并附上日期过滤器）：

<a ng-click="sendMessage('xxx', 'xxx', 
'Thanks. Your appointment with ' + selectedBusiness.name + 
  ' has been booked for ' + (convertDate(booking.date) | date:'fullDate') + 
  ' at ' + booking.time + '.')">Pay</a>

对从视图中的函数拉出的变量使用日期过滤器

1 个答案: