Newer Post

StandStand: The standing desk for the traveling remote developer

Older Post

ContributeX: A Jetpack for Open Source Communities

Nested Controllers, ngInclude, and $scope

When working with AngularJS, $scope will have a pivotal role in your work and when starting out, you might run into road bumps unless you have a rough idea of how to work with it. I’ll aim to explain a couple issues about $scope and ngInclude that I’ve run into.

Below you’ll learn how to avoid targeting $parent or $childscopes when using ng-include, and how to debug your code when realizing that $watchers aren’t operating on the correct model or scope.

$scope ID

First, you need to understand this: Each controller has its own scope, and each scope has a unique ID. Listeners/watchers will apply only to the models in the scope where they were applied.

For instance, a watcher in controller AppCtrl.js who listens to $scope.my_model, will only listen to that model in that scope, not on my_model in a scope with a different ID.

You can find the scope ID in $scope.$id.

Nested controllers $scope ID

When working with nested controllers, such as the example below..

index.html

We'll help you unleash.

Join the 30,000 developers who subscribe to our newsletter.

Scale your
Development team

We help you execute projects by providing trusted developers who can join your team and immediately start delivering high-quality code.

Hire Developers
code, angular