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.