Можно ли предоставить неявный способ преобразования объекта в строку для шаблонов angular?

Предположим, у меня есть несколько объектов с одним и тем же прототипом, и я хочу настроить их отображение в шаблоне Angular. Я знаю, что могу создать свой собственный фильтр, а затем использовать его так:

<p>{{anObjectOfProtoP | myCustomFilter}}</p>

или функция, привязанная к $scope:

<p>{{myCustomFunction(anotherObjectOfProtoP)}}</p>

Мой вопрос: возможно ли достичь аналогичной функциональности без явного указания функции рендеринга каждый раз? Идеальное решение было бы, если Angular проверено на функцию toAngularString на объекте внутри {{}}, а затем использовало его возвращаемое значение в шаблоне. Другими словами, мне бы хотелось Angular сделать

function (o) {
   if (typeof o.toAngularString === 'function') return o.toAngularString();
   return o;
}

для каждого объекта внутри {{}}.

Ответы

Ответ 1

В зависимости от того, используете ли вы синтаксис {{ ... }} или ng-bind, функция .toJSON и .toString на вашем объекте будет вызываться для определения его представления. Следовательно, вы можете предоставить представление, которое вы хотите, в функции .toString или .toJSON вашего объекта.

Это несоответствие, в котором вызывается функция, фактически разрешило некоторые проблемы.

Другой способ, которым вы можете это сделать, - написать свою собственную директиву my-toangularstr следующим образом:

app.directive('myToangularstr', function () {
  return {
    scope: true,
    template: '<span class="my-angular-value">{{ val.toAngularString() }}</span>',
    link: function (scope, elem, attrs) {
      scope.$watch(attrs['myToangularstr'], function (newVal) {
        if (typeof newVal !== 'undefined') {
          scope.val = newVal;
        }
      })
    }
  }
})

Рабочая демонстрация, показывающая все три метода, здесь.

Я думаю, что это так близко, что можно использовать внешний API angular.