Author: Ruben Canton

When creating directives with angular, you can choose to use the parent's scope, create your own isolated scope for the directive or have an inherited one. Let's see what types of scope we have and how to work with them: Let's start by considering this main controller and template: [sourcecode language="js" wraplines="false"] var app = angular.module("testingDirectives", []); app.controller("mainController", function($scope, $timeout) { $scope.MainValue = "main"; $scope.ValueToOverride = "notOverridden"; $scope.ValueToOverrideOn6 = "notOverridden"; $timeout(function() { $scope.MainValue = "main updated"; }, 1000); }); [/sourcecode] [sourcecode language="html" wraplines="false"] <div ng-app="testingDirectives" ng-controller="mainController"> {{MainValue}} <directive-one></directive-one> <directive-two></directive-two> <directive-three></directive-three> <directive-four custom-att="attribute"></directive-four> <directive-five custom-att="attribute"></directive-five> <directive-six custom-att="attribute" custom-att2="overrided"></directive-six> <directive-six custom-att="attribute" custom-att2="overrided 2"></directive-six> <directive-seven custom-att="attribute" custom-att2="overrided"></directive-seven> <directive-seven custom-att="attribute" custom-att2="overrided 2"></directive-seven> <directive-eight from-parent="{{MainValue}}"></directive-eight> <directive-nine from-parent="{{MainValue}}"></directive-nine> </div> [/sourcecode] Using the parent scope In this case, the directive doesn't have a scope of its own,…