If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

Introduction

Data-binding in AngularJS apps is the automatic synchronization of data between the model and view components. When the model changes, the view reflects the change, and vice versa.

Appery.io provides visual tool for binding. By going to the BINDING tab you can view and manage the connections between scope variables/functions and UI components.

Using binding editor

Open BINDING tab to view and manage the links between UI components properties and scope variables:
image_000

The BINDING tab displays properties of the components added in DESIGN tab and allows you to bind them to SCOPE variables and SCOPE functions.

The BINDING tab shows two panes that demonstrate the following element types:

  • The Page pane (on the left): Page UI components with their properties (directives and non-directives).
  • The Scope pane (on the right): Functions and Variables.

The Page pane allows you to display all elements / common elements only.

Expanding/collapsing elements are available for both panes.

You can also click the “arrow” button next to an element to expand / collapse it.

To bind the needed elements, the following methods are used:

  • Using drag-n-drop of UI components.
  • Manually specifying attribute or {{ }} tag in PROPERTIES panel of DESIGN tab.

These are the types of AngularJS elements and attributes you can use within Appery.io:

  • Directive — An attribute or element (variables and expressions). For example, ng-model and ng-click are bound directly.
  • Markup — The double curly brace notation {{ }} to bind expressions to elements. For example, Text works this way.

Bindable objects are highlighted with green:
Highlighted

To delete a connection, select the line. A red cross icon appears. Click the icon to delete this connection:
image_002

Binding details

There are still some cases to take into consideration while creating bindings:

  1. Some properties (for example, Size or Component name of the Button component) are not visible in the editor and unavailable for binding. This means you can bind only to the properties where scope variables can be written.
  2. By default, some rarely used bindable properties are not displayed in the editor – you can open them via Display all button and hide via Common only button.
  3. Binding of scope entities with complex or advanced properties containers isn’t allowed: for example, a variable cannot be bound to Custom Attributes or Icon containers, but only to their subproperties:
    CanCant
  4. If you are trying to bind to a component, the scope entity will be bound to a default component property. In case if you have deleted the default property it will be created again:
    image_003
  5. You cannot bind several values to directive properties (you can do it manually on PROPERTIES panel of the DESIGN tab separating them with semicolons):
    image_004
  6. For markup properties expressions are appended in {{ }} instead of being replaced (nevertheless, default values will be replaced):
    image_005
  7. A function cannot be mapped to a markup property. Directives, like ng-click, ng-view, etc. can be bound to both functions as well as variables:
    image_006
  8. Out of three function types (ScopeSelf executing, and Function), only Scope functions are visible in the editor and available for creating bindings.