angular.jsをやってみる (2) - $interpolateProvider -

angular.js JavaScript

{% raw %}
angular.jsで$interpolateっていう機能を使う事で<span style="color: red">{{ model.name }}</span>っていうのが評価されて出力されるわけだけど、デフォルトではstartSymbolが<span style="color:red">{{</span>で、endSymbolが<span style="color:red">}}</span>っていう事になってる。$interpolateProviderを使うことでこの設定を変える事も出来る模様
{% endraw %}

angular.element(document).ready(function() {
  var app = angular.module("hogeApp", []);

  app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol("[%").endSymbol("%]");
  });

  app.controller("sample1", SampleController);

  angular.bootstrap(document, ["hogeApp"]);
});

な感じで。またコントローラーとかで

var SampleController = (function() {
  function SampleController($scope, $interpolate) {
    var exp = $interpolate("[% model.name %]");
    console.log(exp({ model: { name: "hoge" }}));
  }
})();

ってな感じで$interpolateな注入を利用して、angular.jsなマークアップを内部評価したりもする事も出来る模様

参考1 ($interpolateのドキュメント): http://docs.angularjs.org/api/ng.$interpolate

参考2: ($interpolateProviderのドキュメント): http://docs.angularjs.org/api/ng.$interpolateProvider

関連記事