Prevent AngularJS from compiling contents of element

Question

Is there a way to tell Angular to not compile contents of certain elements?

Use case:

Angular CMS contains textarea elements that have CKEditor attached. The CKEditor is using the divarea plugin instead of the default iframe plugin. The textareas contain HTML templates. These templates are exported on demand and fed to a Angular webapp.

The templates are simple enough: plain text, ordered lists, the occasional predefined class attribute applied on the plain text; but the plain text can contain placeholders for the Angular webapp to interpolate. I do not want to let the Angular in the CMS interpolate these at all.

Currently my problem is that the Angular in the CMS interpolates these placeholders and, since they don't refer to anything, removes them. I would rather not just change the delimiters to '{[', ']}', as while this might fix this in the short term, the chance of directive and text copy collision increases as the project goes on, and I'd like to avoid it.

Is there any directive or other way to tell Angular to keep away from the content of specially marked elements?

Answer 1

Use ng-non-bindable directive on the element:

The ngNonBindable directive tells Angular not to compile or bind the contents of the current DOM element. This is useful if the element contains what appears to be Angular directives and bindings but which should be ignored by Angular.

Or use your own directive with terminal: true property to match the layout better, because it is the only thing that ng-non-bindable directive does.