Template Expressions

Template expressions are being evaluated in the given scope. So we can reference scope variables within template e.g. data-ng-if="foo" refers to foo variable of the scope and therefore:

template.sync({ foo: true }); // show element
template.sync({ foo: false }); // hide element

We access scope objects the same way we do it in JavaScript e.g. data-ng-if="foo.bar" refers to foo.bar and can be toggled like this:

template.sync({ foo: { bar: true } }); // show element

Expressions may have mixed scope variables and primitives:

data-ng-if="foo && bar.baz || false"
data-ng-if="foo + 10  > 20"

We can pass rendering helpers (e.g. transformers) with the scope. For example we pass decorator to the directive data-ng-if="decorator(foo)" this way:

{
  foo: "foo",
  decorator: function( val ){
    return "decorated " + val;
  }
}

Expressions are evaluated in the context of the target element, so we can access the element with this:

data-ng-if="foo && this.checked"

NOTE: In order to gain better performance keep to primitive expressions especially in cyclic directives e.g. data-ng-text="foo.bar.baz", data-ng-text="!foo.bar.baz", data-ng-text="'string here'", data-ng-if="foo.bar > baz.quiz", data-ng-text="foo + 10, data-ng-if="true", data-ng-prop="'disabled', true || false", data-ng-data="foo || bar, baz". Such expressions are being evaluated without use of eval() and therefore the process takes much less time and resources. You can check how the parser treats your expressions by studying content of template.report().tokens array