ng-channel

Description

Updates element’s content by subscribing to events published on a named channel using $eventBus.

• If the element does not contain any child elements or templates, the directive will replace the element’s inner HTML with the published value.
• If the element does contain a template and the published value is an object, the directive will merge the object’s key-value pairs into the current scope, allowing Angular expressions like to be evaluated and rendered.

The directive automatically unsubscribes from the event channel when the scope is destroyed.

Parameters

ng-channel

• Type: string
• Description: The name of the channel to subscribe to using $eventBus.

Demo

<div ng-app>
  <!-- With empty node -->
  <div ng-channel="epoch"></div>

  <!-- With template -->
  <div ng-channel="user">Hello {{ user.firstName }} {{ user.lastName }}</div>
</div>

<button
  class="btn btn-dark"
  onclick='angular.$eventBus.publish("epoch", Date.now())'
>
  Publish epoch
</button>

<button
  class="btn btn-dark"
  onclick='angular.$eventBus.publish("user", {user: {
        firstName: "John",
        lastName: "Smith" 
    }})'
>
  Publish name
</button>