How to Change Variables from Outside of a Directive

If you use AngularJs Directives, you will probably need to change any variable inside of it.The ways are different depend on scope's type.As you know, there are 3 types of scope: not inherit, inherit, isolated.

Since AngularJS is now a deprecated framework, you can use JavaScript modern frameworks like Vuejs, React and Angular, instead.

Lets see how we can change variable for each type of scope.

1. scope: false (not inherit)

If you use directive without typing scope or typing scope to false, it means your directive will not inherit the scope, will not isolate it. Your directive will work on your current scope, that's why you will not have any problem to change any variable inside your directive. You can change whatever variable you want inside your controller/directive on current scope.

2. scope: true (inherit)

inside your directive scope: true means, that your directive will inherit a scope from its a parent. It's not the current (parent) scope, and it's not isolated scope. Angular will create a new scope, which is the child of the current scope and exists in current scope as a child.

If you try to check out the parent scope, you will see the architecture of it.In your parent scope you will see the field called $$childHead, which is the first child scope of it and the field $$childTail, which is the last child of you scope.

If you have multiple directives, inside parent scope angular will create all child scopes with the following architecture: inside you first child scope you will see something like this $$nextSibling, which is the next of the scope.

As you understand you can take the first scope, change it's variable and go through next scope and change it's variable too.

The parent scope is something like this:

$$asyncQueue: Array[0]
$$childHead: $get.e.$new.a
   $$asyncQueue: Array[0]
   $$childHead: null
   $$childTail: null
   $$listeners: Object
   $$nextSibling: $get.e.$new.a
   $$prevSibling: null
   $$watchers: null
   $id: "004"
   $parent: $get.e.$new.a
   this: $get.e.$new.a
   __proto__: $get.e.$new.a
$$childTail: $get.e.$new.a
   $$asyncQueue: Array[0]
   $$childHead: null
   $$childTail: null
   $$listeners: Object
   $$nextSibling: null
   $$prevSibling: $get.e.$new.a
   $$watchers: null
   $id: "006"
   $parent: $get.e.$new.a
   this: $get.e.$new.a
   __proto__: $get.e.$new.a
$$listeners: Object
$$nextSibling: null
$$prevSibling: null
$$watchers: null
$id: "003"

Example

<!DOCTYPE html>
<html>
 <head>
   <title>www.w3docs.com</title>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
   <script>
      angular.module('test',[])
      .controller('testCtrl',function($scope){
            console.log($scope,'ctrl')
      })
         .directive('myTest',function(){
            return {
               restrict: 'EA',
               scope: false,
               compile: function(){
                  return function(scope){
                     console.log(scope,'directive');
                   }
           }
            }
         })
.directive('myIsolateTest',function(){
            return {
               restrict: 'EA',
               scope: true,
               compile: function(){
                  return function(scope){
                     console.log(scope,'directive');
                   }
           }
            }
         })
   </script>
 </head>
 <body>
   <div ng-app="test">
     <div ng-controller="testCtrl">
inherit parent scope
       <div my-test>scope id: {{$id}}</div>
       <div my-test>scope id: {{$id}}</div>
       <div my-test>scope id: {{$id}}</div>
<hr>
has own scope
       <div my-isolate-test>scope id: {{$id}}</div>
       <div my-isolate-test>scope id: {{$id}}</div>
       <div my-isolate-test>scope id: {{$id}}</div>
     </div>
   </div>
 </body>
</html>

Try it Yourself »

In the case of an isolated scope, the directive scope is completely unaware of its parent’s scope.