This directive is used to wrap child elements into a View render node. This is especially useful for grouping.
<fa-view> surrounded by a
<fa-modifier> in order to affect the View's position, scale, etc.
<fa-view> <!-- content --> </fa-view>
A Famous View is used for encapsulating many Modifiers and Surfaces together. Internally, it is a Render Node that has its own input EventHandler (
_eventInput) and output EventHandler (
It does not map to DOM elements, but rather, it is an empty Render Node that can be extended by a developer.
A View's input eventHandler is the aggregation point of all events coming into the View, and from there, the View can listen for specific events and handle them.
A more concrete example is a Scroll View: it is a Famous View that has been extended with certain sets of behavior to handle events such as a mouse scroll.
In the example below, when an
fa-surface within an
fa-scroll-view propagates an event (such as mouse scroll), these events are piped to the Scroll View (through
fa-pipe-to). These events go through the Scroll View's
fa-pipe-from). From there, the Scroll View has pre-defined event handlers to handle these events.
Famous Views are a way to encapsulate large event systems with renderables (Surfaces & Modifiers).
<fa-scroll-view fa-pipe-from="myEventHandler"> <fa-view> <fa-modifier fa-size="[320, 320]"> <fa-surface fa-pipe-to="myEventHandler"></fa-surface> </fa-modifier> </fa-view> </fa-scroll-view>
var EventHandler = $famous['famous/core/EventHandler']; $scope.myEventHandler = new EventHandler();
Event propagation within & between Views
In the Famous event model, an
fa-view nested within another
fa-view does not automatically propagate its events to its parent.
Not even an
fa-surface nested inside an
fa-view propagates its events to the
fa-view. All events to an
fa-view must be piped explicitly.
For a more thorough discussion on Famous-Angular events, go to fa-pipe-from/fa-pipe-to in the docs.