angular scope.$parent is null, a bug or a feature?

Question

I wrote the following code, which is a directive that display data from the server in an infinite autoscroll, i.e. the thumbnails are automatically scrolled up, and each time a thumb goes out of view a new one is loaded from the server. If the user points on a thumb, the autoscroll stops until the user remove the mouse. This works ok (as long as the user doesn't point on a thumb), but for some reason, after the autoscroll stops & restart, it works for a few seconds and then it breaks because the scope.$parent is null ``` var wmApp = angular.module("wmApp"); wmApp.directive("wmThumb", function($rootScope, $http) { return { link: function(scope, element, attrs) { $rootScope.autoscroll = 1; w = $('.content').width(); h = $('.content').height(); eWidth = w * 0.2; eHeight = h * 0.25; growWidth = w * 0.4; element.width(eWidth); $(".bands-thumb").css("right", 0); contain = element.parents(".thumbs-container"); element.css("margin", w * 0.01); contain.height(h * 0.9); contain.width(growWidth…

Accepted Answer

You asked about best practices. To make directives more flexible and reusable, it is recommended instead of hard-coding the $scope chain you inherit from the parent scope explicitly. For example, I noticed you are querying bands and bandsPage. Instead of relying on the parent scope and inheritance to make this possible, you can instead use scope isolation to map those variables from the parent scope into an isolated scope for your directive:

```
return {
   scope: {
       bands: "=", 
       bandsPage: "="
   },
   link: etc. etc. 
}
```

This sets up a two-way data-binding so you can "map-through" like this:

```
<myDirective bands="bands" bandsPage="bandsPage" ...> 
```

This way it won't matter if you are in a parent scope or a child scope and you won't have to capture the scope value. It is available on linking but what you want is something there any time the directive is used, and the scope isolation will automatically create a scope for your directive that maps up to the inherited properties you specify while isolating your code from extraneous properties you don't need.

You can learn more in the "Isolating the Scope of the Directive" section of the page here: view-source:http://docs.angularjs.org/guide/directive#!

angular scope.$parent is null, a bug or a feature?

Solution

Problem