3

同じプロトタイプを持ついくつかのオブジェクトがあり、Angular テンプレートでそれらの表示をカスタマイズしたいとします。独自のフィルターを作成して、次のように使用できることはわかっています。

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

または $scope に添付された関数:

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

私の質問は、毎回レンダリング関数を明示的に指定せずに同様の機能を実現することは可能ですか? toAngularString理想的な解決策は、角度が内のオブジェクトの関数をチェックし{{}}、その戻り値をテンプレートで使用した場合です。つまり、Angularにやってもらいたい

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

内のすべてのオブジェクトに{{}}。

4

1 に答える 1

4

{{ ... }}または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;
        }
      })
    }
  }
})

3 つの方法すべてを示す実際のデモはこちらです。

これは、angular の外部 API を使用して取得できる限り近いと思います。

于 2013-11-02T17:29:01.430 に答える