大学生からの Web 開発

会社の人に見つかってぽよぽよしてきた

SlimでAngularJSを扱ってエラーが出たときの対処法

AngularJSが話題になってるのでちょっと触ってみました。で、ruby製のテンプレートエンジン「Slim」を使うと、ちょこっとエラーが出るので対処法を。

ng-app

!DOCTYPE html
html ng-app
head
......

これだとエラーが出ます。slimでng-appと指定するときはng-app=''としましょう。

!DOCTYPE html
html ng-app=''
head
......

{{ }}

データバインディング{{ }}。 これも以下のようにそのまま書いてもエラーが出ます。実装されてる何かしらの{ }とかぶってるんですかね(?)

input type="text" ng-model="name"
{{name}}

これは3つの書き方で回避することができます。まずは

input type="text" ng-model="name"
p
  | {{name}}

|でテキストとして出力することで回避できます。もしくは

input type="text" ng-model="name"
p ng-bind="name"

ng-bindで指定すればOK。

最後に、{ }を区切り文字から外す方法。 Rubyファイルにこう書けばOKっす。

Slim::Engine.default_options[:attr_delims] = {'(' => ')', '[' => ']'}

ただし、slimのもとからの{ }の書き方が使えなくなります。

なので一番いいのは最初の書き方ですかね。

参考

Syntax error when using Angular.js syntax without attributes. · Issue #453 · slim-template/slim · GitHub
GitHub - yuya-matsushima/slim: Slim is a template language whose goal is reduce the syntax to the essential parts without becoming cryptic.