1

When you use {{}}, slim looks at the first { and thinks it's an attribute.

How can you disable { as a key character from slim. so that using {{ }} will be interpreted as angular, not a slim attribute?

(P.S. I'm using slim-rails gem, so the solution may be specific to rails, but who knows?)

ahnbizcad
  • 10,491
  • 9
  • 59
  • 85
  • 1
    You can use ng-bind or https://docs.angularjs.org/api/ng/service/$interpolate – Whisher Sep 14 '14 at 18:30
  • While a valid solution, that would probably be extremely tedious and annoying to code/read/maintain. I can already use `|` or `'` in front of the `{{}}` as provided by slim, parsing it as raw text, which gets interpreted as angular – ahnbizcad Sep 14 '14 at 18:33
  • 1
    I don't know about slim, but you can change the interpolation markers (`{{`, `}}`) in Angular. E.g. instead of `{{ ... }}` use `[[ ... ]]` or `(-: ... :-)` or whatever :) – gkalpak Sep 14 '14 at 18:35
  • Would I need to change it in angular with a setting, or do you mean that I can just use those syntax? – ahnbizcad Sep 14 '14 at 18:37
  • In this question http://stackoverflow.com/questions/13671701/angularjs-twig-conflict-with-double-curly-braces , the accepted answer shows how to change waht angular considers `{{}}` – ahnbizcad Sep 14 '14 at 18:54

3 Answers3

8

Here is what I do without changing settings:

p
  | {{ user.name }}
  = a_method_call

or

p ng-bind="user.name" = a_method_call
apneadiving
  • 114,565
  • 26
  • 219
  • 213
  • would you know how to change the settings? =D – ahnbizcad Sep 14 '14 at 18:47
  • Also, with your way, how do you handle content that has more stuff after it that is not verbatim text? e.g. `p | {{user.name}} a_method_call` – ahnbizcad Sep 14 '14 at 18:48
  • edited for method call, do you really feel like it worth it to change angular's config? – apneadiving Sep 14 '14 at 18:50
  • I'd rather change slim's config, since slim has multiple syntax: `{}` `[]` `()`. Telling slim to stop recognizing `{}` would allow angular to be as is, leaving you with two other options for slim. I found how to adjust angular settings here http://stackoverflow.com/questions/13671701/angularjs-twig-conflict-with-double-curly-braces – ahnbizcad Sep 14 '14 at 18:53
  • 1
    ok look here: https://github.com/slim-template/slim#available-options, even if I dont feel like it worth it :) – apneadiving Sep 14 '14 at 18:58
  • The missing info is WHERE to put those config settings (why do people assume people know where to place everything? xp). I also happen to be using slim-rails, which doesn't generate a config/initializer file. I guess it's not worth it. – ahnbizcad Sep 14 '14 at 19:04
  • Oh, I can just create a file from scratch? Would slim-rails recognize it? Most likely, since it uses slim... I guess I can install slim, see what the initializer file wrappers look like, copy that, uninstall slim, create my initializer from scratch, and put in the code I wish within the wrappers. – ahnbizcad Sep 14 '14 at 19:10
  • Very good to know. I am using `slim-rails`, so I meant I'd keep `slim-rails`, but install then uninstall `slim` just to see what the proper config code would require. – ahnbizcad Sep 14 '14 at 21:57
4

You can change default options of slim, to not use { }. Put it to initializers folder:

Slim::Engine.set_options attr_list_delims: {'(' => ')', '[' => ']'}, code_attr_delims: {'(' => ')', '[' => ']'}
Lyubomyr
  • 41
  • 3
  • Sometimes it's really inconvenient to have to separate text onto a new line with the pile (|) and get the rails syntax to work. This is really the best way to go. – Scott Eisenberg May 08 '16 at 21:53
1

If you wish to change the interpolation markers in Angular, you can use the corresonding methods of the $interpolateProvider inside a config block:

angular.
    module('myApp', []).
    config(function ($interpolateProvider) {
        $interpolateProvider.startSymbol('[[');
        $interpolateProvider.endSymbol(']]');
    });

Then Angular will not recognize the old markers ({{, }}).
You'll be using the new ones:

<span>[[someValue]]</span>
gkalpak
  • 47,844
  • 8
  • 105
  • 118
  • unfortunately, slim detects all three of `{}` `[]` and `()`, so wouldn't any alternative angular symbol starting with any of these three characters still have the same problem? You'd need to use a different character? – ahnbizcad Sep 14 '14 at 19:10
  • @gwho: You can use any character sequence (and of any length) that suits you. I am not familiar with slim, so I can;t make a good suggestion. – gkalpak Sep 14 '14 at 19:30