Professional by Valeri Karpov & Diego Netto

Author:Valeri Karpov & Diego Netto
Language: eng
Format: epub
ISBN: 9781118832080
Published: 2015-04-16T00:00:00+00:00

The Second Way of Using the scope Setting

Recall that the second way of using the scope setting, specifying a JavaScript object (possibly empty, that is, { }), creates a new scope for the directive that does not have a parent scope. Thus, the scope.$parent.$watch() pattern from the previous section does not work, because the directive’s scope is outside the page’s scope hierarchy. If you’re worried that this means your directives will not have a way to access variables in the page’s scope, don’t worry—AngularJS provides a slick way to pull outside variables into the isolate scope. Here’s an example of how this works:

module.directive('imageCarousel', function() { return { template: '<div my-background-image="images[currentIndex]"' + ' ng-swipe-left="next()"' + ' ng-swipe-right="previous()"' + ' style="height: 120px; width: 600px; border: 1px solid red">' + '</div>' + '<input type="button" toggle-button="disabled">' + '<h1>Image index: {{currentIndex}}</h1>', controller : CarouselController, scope : { images : '=imageCarousel' } } });

The =imageCarousel syntax in the scope setting is a handy shortcut for the scope.$parent.$watch() call you did in the previous section. In the scope setting, = tells AngularJS that the images variable should be bound to the variable specified in the imageCarousel attribute, with the understanding that the imageCarousel attribute should be evaluated in the directive’s parent scope. You will see this shortcut used extensively in AngularJS directive code, so make sure you remember its semantics. In particular, make sure you remember that, in the scope setting, the object keys are the variables in the scope, and the object values refer to the HTML attribute that the scope variable should be bound to.

But doesn’t this shortcut defeat the point of having an isolate scope? Actually, if you want a strict isolate scope, where there is no data binding between the isolate scope and the page’s scope structure, you can use an empty object { } for the scope setting. However, the use cases for strict isolate scopes are somewhat limited, because such a directive must be entirely self-contained. Such directives are often called components and will be discussed later in this chapter.

The = shortcut for isolate scopes serves two primary functions. First, writing =imageCarousel is far more concise than writing out the full scope.$parent.$watch() call. Second, the fact that the scope is marked as isolate ensures that the directive’s template doesn’t access any variables outside the directive except for as explicitly specified in the scope setting. This makes your directives easier to understand and use, because your client is guaranteed that your directive only interacts with the outside world through the scope setting. The isolate scope also serves as a preventive measure against silly mistakes. For example, try to spot the bug in the following code:

module.directive('imageCarousel', function() { return { template: '<div my-background-image="defaultImages[currentIndex]"' + ' ng-swipe-left="next()"' + ' ng-swipe-right="previous()"' + ' style="height: 120px; width: 600px; border: 1px solid red">' + '</div>' + '<input type="button" toggle-button="disabled">' + '<h1>Image index: {{currentIndex}}</h1>', controller : CarouselController, scope : true, link : function(scope, element, attributes) { scope.$parent.$watch(attributes.imageCarousel, function(v) { scope.images = v; }); } } });

The myBackgroundImage directive in the template uses the defaultImages variable, which is defined in the parent scope.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.