*
Previous AngularJS-QA-9 AngularJS-QA-11 Next

AngularJS Question Answers - 10
Question: When a scope is terminated, two similar “destroy” events are fired. What are they used for?
Answer: The first one is an AngularJS event, “$destroy”, and the second one is a jqLite / jQuery event “$destroy”. The first one can be used by AngularJS scopes where they are accessible, such as in controllers or link functions.

The jqLite / jQuery event is called whenever a node is removed, which may just happen without scope teardown.
Question: Name and describe the phases of a directive definition function execution?
Answer: The flow is as follows:

First, the “$compile()” function is executed which returns two link functions, preLink and postLink. That function is executed for every directive, starting from parent, then child, then grandchild.

Secondly, two functions are executed for every directive: the controller and the prelink function. The order of execution again starts with the parent element, then child, then grandchild, etc.

The last function postLink is executed in the inverse order. That is, it is first executed for grandchild, then child, then parent.
Question: How do you reset a “$timeout”, and disable a “$watch()”?
Answer: The key to both is assigning the result of the function to a variable.
To cleanup the timeout, just “.cancel()” it: 
var customTimeout = $timeout(function () {
  // arbitrary code
}, 55);
$timeout.cancel(customTimeout);

The same applies to “$interval()”.
To disable a watch, just call it.
// .$watch() returns a deregistration function that we store to a variable
var deregisterWatchFn = $rootScope.$watch(‘someGloballyAvailableProperty’,
  function (newVal) {
    if (newVal) {
      // we invoke that deregistration function, to disable the watch
      deregisterWatchFn();
      ...
  }
});
Question: What directive would you use to hide elements from the HTML DOM by removing them from that DOM not changing their styling?
Answer: The ngIf Directive, when applied to an element, will remove that element from the DOM if it’s condition is false.
Question: How would you make an Angular service return a promise?
Answer: To add promise functionality to a service, we inject the “$q” dependency in the service, and then use it like so: 
angular.factory('testService', function($q){
 return {
  getName: function(){
   var deferred = $q.defer();

   //API call here that returns data
   testAPI.getName().then(function(name){
    deferred.resolve(name)
   })
   return deferred.promise;
  }
 }
})
The $q library is a helper provider that implements promises and deferred objects to enable asynchronous functionality.
Question: How to define the way your directive will be used?
Answer: To define which way to use, need to set the restrict option in our directive declaration.

The restrict option is typically set to:
‘A’ – only matches attribute name
‘E’ – only matches element name
‘C’ – only matches class name

These restrictions can all be combined as needed:
‘AEC’ – matches either attribute or element or class name
Question: How to disable a $watch()?
Answer: To disable $watch(), call its deregistration function. $watch() then returns a deregistration function that we store to a variable and that will be called for cleanup 
var deregisterWatchFn = $scope.$on(‘$destroy’, function () {
    // Invoke that deregistration function, to disable the watch
    deregisterWatchFn();
});
Question: How to hide an HTML element via a button click in AngularJS?
Answer: To do this by using the ng-hide directive in conjunction with a controller we can hide an HTML element on button click. 
<div ng-controller="MyCtrl" >
 <button ng-click="hide()">Hide element</button>
 <p ng-hide="isHide">Hello World!</p>
</div>
function MyCtrl($scope){
 $scope.isHide = false;
 $scope.hide = function(){
  $scope.isHide = true;
 }
}
Question: What is the purpose of the directive 'ng-cloak'?
Answer: ng-cloak: Prevents flickering when your application is being loaded.
Question: In case of nested controllers, does the $scope object shared across all controllers?
Answer: YES. The $scope object is shared across all controllers and it happens due to scope inheritance. Since the ng-controller directive creates a new child scope, we get a hierarchy of scopes that inherit from each other. So if we define a property on a parent scope, the child scope can manipulate the property. And if the property is not present in child scope, then parent scope property's value is used.
Back to Index
Previous AngularJS-QA-9 AngularJS-QA-11 Next
*
*