Improve this Doc View Source ngRef

  1. directive in module ng

Overview

The ngRef attribute tells AngularJS to assign the controller of a component (or a directive) to the given property in the current scope. It is also possible to add the jqlite-wrapped DOM element to the scope.

If the element with ngRef is destroyed null is assigned to the property.

Note that if you want to assign from a child into the parent scope, you must initialize the target property on the parent scope, otherwise ngRef will assign on the child scope. This commonly happens when assigning elements or components wrapped in ngIf or ngRepeat. See the second example below.

Directive Info

  • This directive executes at priority level 0.

Usage

  • as attribute: 
    <ANY
  ng-ref="string"
  [ng-ref-read="string"]>
...
</ANY>

Arguments

Param Type Details
ngRef string

property name - A valid AngularJS expression identifier to which the controller or jqlite-wrapped DOM element will be bound.
ngRefRead
(optional)
 string

read value - The name of a directive (or component) on this element, or the special string $element. If a name is provided, ngRef will assign the matching controller. If $element is provided, the element itself is assigned (even if a controller is available).

Examples

Simple toggle

This example shows how the controller of the component toggle is reused in the template through the scope to use its logic.

ngRef inside scopes

This example shows how ngRef works with child scopes. The ngRepeat-ed myWrapper components are assigned to the scope of myRoot, because the toggles property has been initialized. The repeated myToggle components are published to the child scopes created by ngRepeat. ngIf behaves similarly - the assignment of myToggle happens in the ngIf child scope, because the target property has not been initialized on the myRoot component controller.

© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 3.0.
https://code.angularjs.org/1.8.2/docs/api/ng/directive/ngRef