Transcript
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
top related