Meteor angular template function call

0
votes

I have been having problems rendering a template function call from a meteor/angular template. I am trying to use the Moment.js package to format my time stamp. I have seen examples of this done with Blaze however, I can't replicate it in Meteor with Angular. My issue is with the formatTimestamp() function call. It isn't rendering anything and there are no errors in my console. Where am I going wrong?

My template

  <li ng-repeat="task in $ctrl.tasks" ng-class="{'private' : task.private}">
<details>
  <summary>{{task.administration.inventoryNumber}}</summary>
  <ul class="bxslider">
    <li><h3>Adminstration</h3>
        <table>
          <td>created at: </td><td>{{formatTimestamp(task.administration.createdAt)}}</td>

My controller

class TodosListCtrl {
constructor($scope) {
$scope.viewModel(this);

this.subscribe('tasks');

this.helpers({
  tasks() {
    const selector = {};

    return Artefacts.find(selector, {
      sort: {
        createdAt: -1
      }
    });
  },
  currentUser() {
    return Meteor.user();
  },
  formatTimestamp: function (timestamp) {
    alert("timestamp");
    console.log(timestamp);
    return moment(timestamp).calendar();
  }
 })
}

Insert Mongo function

Artefacts.insert({
  administration: {
    inventoryNumber: invNum,
    boxNumber: boxNum,
    createdAt: new Date(),
2
angularjsmongodbmeteorangular-meteormeteor-helper

2 Answers

0
votes

Your custom function goes outside of the constructor, like this

class TodosListCtrl {
  constructor($scope) {
    $scope.viewModel(this);

    this.subscribe('tasks');
    this.helpers({
      tasks() {
        const selector = {};

        return Artefacts.find(selector, {
          sort: {
            createdAt: -1
          }
        });
      },
      currentUser() {
        return Meteor.user();
      }
    })
  }

  formatTimestamp(timestamp) {
    alert("timestamp");
    console.log(timestamp);
    return moment(timestamp).calendar();
  }
}

But also, remember in the view to call formatTimeStamp with $ctrl as prefix because it looks like you are using the ControllerAs syntax.

Your code:

<li ng-repeat="task in $ctrl.tasks" ng-class="{'private' : task.private}">
  <details>
    <summary>{{task.administration.inventoryNumber}}</summary>
    <ul class="bxslider">
      <li><h3>Adminstration</h3>
          <table>
            <td>created at: </td><td>{{formatTimestamp(task.administration.createdAt)}}</td>

How it should be:

<li ng-repeat="task in $ctrl.tasks" ng-class="{'private' : task.private}">
  <details>
    <summary>{{task.administration.inventoryNumber}}</summary>
    <ul class="bxslider">
      <li><h3>Adminstration</h3>
          <table>
            <td>created at: </td><td>{{$ctrl.formatTimestamp(task.administration.createdAt)}}</td>
0
votes

don't need to create a function for date format. It is bad practice to call a function with angular expressions {{}}. You can format your date in Meteor helper.

this.helpers({
  tasks() {
    const selector = {};

    this.value =  Artefacts.find(selector, {
      sort: {
        createdAt: -1
      }
  // add filter here on createdAt
       $filter('filter')(this.value.cretedAt);
     });
  },