AngularJS Training - Day #5

By

George

Agenda• $scope Hierarchy• AngularJS $watch() , $observe, $digest() and $apply()• AngularJS Events

– ng-click– ng-dbl-click– ng-mousedown– ng-mouseup– ng-mouseenter– ng-mouseleave– ng-mousemove– ng-mouseover– ng-keydown– ng-keyup– ng-keypress– ng-change

scope Hierarchy

• The $scope object used by views in AngularJS are organized into a

hierarchy

• There is a root scope, and the root scope has one or more child scopes

• Each view has its own $scope (which is a child of the root scope),

• so whatever variables one view controller sets on its $scope variable, those

variables are invisible to other controllers.

scope Hierarchy

AngularJS $watch() , $digest() and $apply()

• A watch means that AngularJS watches changes in the variable on the $scope object.

• $scope.$digest() function iterates through all watches and checks if any of the watched variables have changed

• The $scope.$apply() function is used to execute some code, and then call $scope.$digest() after that, so all watches are checked and the corresponding watch listener functions are called.

• The $apply() function is useful when integrating AngularJS with other code.

$watch() & $watchCollection

• Syntax: • $watch(watchExpression, listener, [objectEquality]);

• watchCollection() function was added for collection-oriented change management.

$watch using function call

$observe

• Observes an interpolated attribute.

• The observer is then invoked whenever the interpolated value changes

• Syntax:– $observe(key, fn);

$digest() & $apply()

• The $scope.$digest() function iterates through all the watches in the $scope object

• The $scope.$apply() function takes a function as parameter which is executed, and after that $scope.$digest() is called internally.

ng-click Directive

• The ngClick directive allows you to specify custom behavior when an element is clicked.

ng-dbl-click

• The ngDblclick directive allows you to specify custom behavior on a dblclick event.

ngMousedown

• The ngMousedown directive allows you to specify custom behavior on mousedown event.

ngMouseup

• Specify custom behavior on mouseup event.

ngMouseenter

• Specify custom behavior on mouseenter event.

ngMouseleave

• Specify custom behavior on mouseleave event.

ngMousemove

• Specify custom behavior on mousemove event.

ngMouseover

• Specify custom behavior on mouseover event.

ngKeydown

• Specify custom behavior on keydown event.

ngKeyup

• Specify custom behavior on keyup event.

ngKeypress

• Specify custom behavior on keypress event.

ngChange• Evaluate the given expression when the user changes the input.• The ngChange expression is only evaluated when a change in the input value

causes a new value to be committed to the model.• It will not be evaluated: if the model is changed programmatically and not by a

change to the input value• Note, this directive requires ngModel to be present.

Assignments