mfdj · August 29, 2015 14:14
diff --git a/angular_scope_inheritance_demo.html b/angular_scope_inheritance_demo.html
 <!DOCTYPE html>
 <html lang="en" ng-app="myApp">
 <head>
  <meta charset="UTF-8">
  <title>scope inheritance</title>
 </head>
 <body>
 <h3>Controller Scope Inheritance</h3>

 <!-- PARENT -->
 <li>every controller shares a variable named <pre>some_var</pre></li>
 <li>ParentController defines two functions <pre>parentWrite()</pre> and <pre>sharedWrite()</pre></li>
 <li>ChildController defines one function <pre>sharedWrite()</pre> which will overwrite the Parent defintion</li>
 <div ng-controller="ParentController">
    <p>
        <br><span>ParentController</span>: <b>{{ some_var }}</b>
        <br>
        <button ng-click="parentWrite('from parent parentWrite')">parent parentWrite</button>
        <button ng-click="sharedWrite('from parent sharedWrite')">parent sharedWrite</button>
        <br><input type="text" ng-model="some_var">
    </p>

    <!-- CHILD -->
    <div ng-controller="ChildController">
        <p>
            <br><span>first ChildController</span>: <b>{{ some_var }}</b>
            <br>
            <button ng-click="parentWrite('child will parentWrite parents')">child parentWrite</button>
            <button ng-click="sharedWrite('child will partition scope')">child sharedWrite</button>
            <br><input type="text" ng-model="some_var">
        </p>

        <!-- FIRST CHILD -->
        <div ng-controller="ChildController">
            <p>
                <br><span>nested ChildController</span>: <b>{{ some_var }}</b>
                <br>
                <button ng-click="parentWrite('nested child will parentWrite parents')">nested child parentWrite</button>
                <button ng-click="sharedWrite('nested child will partition scope again')">nested child sharedWrite</button>
                <br><input type="text" ng-model="some_var">
            </p>
        </div>
    </div>

    <!-- SECOND CHILD  -->
    <div ng-controller="ChildController">
        <p>
            <br><span>second ChildController</span>: <b>{{ some_var }}</b>
            <br>
            <button ng-click="parentWrite('nested child will parentWrite parents')">second child parentWrite</button>
            <button ng-click="sharedWrite('second child will partition scope')">second child sharedWrite</button>
            <br><input type="text" ng-model="some_var">
        </p>
    </div>
 </div>

 <hr>

 <h3>Directives: Isolated versus Inherited Scope</h3>
 <li>both the controller and the directives write to <pre>some_var</pre></li>
 <div ng-controller="ParentController">
    <p>
        <span>parent</span>:
        <br><b>{{ some_var }}</b>
        <br><input width="400" type="text" ng-model="some_var">
    </p>
    <div>
        <isolated-directive></isolated-directive>
        <not-isolated></not-isolated>
    </div>
 </div>

 <!-- JAVASCRIPT -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.js"></script>
 <script>
 angular.module('myApp', [])

    /**
     * Contorller Examples
     */
    .controller('ParentController', function($scope) {
        $scope.parentWrite = function (value) {
            $scope.some_var = value;
        };

        $scope.sharedWrite = function (value) {
            $scope.some_var = value + ' (*parent*)';
        };
    })
    .controller('ChildController', function($scope) {
        $scope.sharedWrite = function (value) {
            $scope.some_var = value + ' (*child*)';
        };
    })

    /**
     * Directive Examples
     */
    .directive('isolatedDirective', function() {
        return {
            scope: {}, // has isolated scope, no naming clahses possible
            template: '<li><span>isolated</span> <b>{{ some_var }}</b>'
            + ' <button ng-click="write(\'my writes have no effect\')">write</button></li>',
            controller: function($scope) {
                $scope.some_var = "I control my own scope: I am isolated"
                $scope.write = function(value) {
                    $scope.some_var = value;
                };
            }
        }
    })
    .directive('notIsolated', function() {
        return {
            // does not have isolate scope, will inherit values
            template: '<li><span>not isolated</span> <b>{{ some_var }}</b>'
            + ' <button ng-click="write(\'i can write back without partitioning\')">write</button></li>',
            controller: function($scope) {
                $scope.some_var = "non-isolated wrote first"
                $scope.write = function(value) {
                    $scope.some_var = value;
                };
            }
        }
    })
 ;
 </script>
 <style>

 body { margin: 30px 40px; font-size: 16px; font-family: Avenir, sans-serif; }
 div { margin: 25px; padding-left: 20px; border-left: 1px solid #444; }
 li { padding-left: 5px; }
 p { display: block; }
 p span, li span { color: red;}
 pre { display: inline; background: #d6d6d6; font-size: 12px; padding: 3px; color: #444;}
 li { padding-top: 10px; }
 input { width: 300px; }
 button, input { font-size: 13px; }
 hr { margin: 40px 0;}
 </style>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en" ng-app="myApp">
	<head>
	<meta charset="UTF-8">
	<title>scope inheritance</title>
	</head>
	<body>
	<h3>Controller Scope Inheritance</h3>

	<!-- PARENT -->
	<li>every controller shares a variable named <pre>some_var</pre></li>
	<li>ParentController defines two functions <pre>parentWrite()</pre> and <pre>sharedWrite()</pre></li>
	<li>ChildController defines one function <pre>sharedWrite()</pre> which will overwrite the Parent defintion</li>
	<div ng-controller="ParentController">
	<p>
	<br><span>ParentController</span>: <b>{{ some_var }}</b>
	<br>
	<button ng-click="parentWrite('from parent parentWrite')">parent parentWrite</button>
	<button ng-click="sharedWrite('from parent sharedWrite')">parent sharedWrite</button>
	<br><input type="text" ng-model="some_var">
	</p>

	<!-- CHILD -->
	<div ng-controller="ChildController">
	<p>
	<br><span>first ChildController</span>: <b>{{ some_var }}</b>
	<br>
	<button ng-click="parentWrite('child will parentWrite parents')">child parentWrite</button>
	<button ng-click="sharedWrite('child will partition scope')">child sharedWrite</button>
	<br><input type="text" ng-model="some_var">
	</p>

	<!-- FIRST CHILD -->
	<div ng-controller="ChildController">
	<p>
	<br><span>nested ChildController</span>: <b>{{ some_var }}</b>
	<br>
	<button ng-click="parentWrite('nested child will parentWrite parents')">nested child parentWrite</button>
	<button ng-click="sharedWrite('nested child will partition scope again')">nested child sharedWrite</button>
	<br><input type="text" ng-model="some_var">
	</p>
	</div>
	</div>

	<!-- SECOND CHILD -->
	<div ng-controller="ChildController">
	<p>
	<br><span>second ChildController</span>: <b>{{ some_var }}</b>
	<br>
	<button ng-click="parentWrite('nested child will parentWrite parents')">second child parentWrite</button>
	<button ng-click="sharedWrite('second child will partition scope')">second child sharedWrite</button>
	<br><input type="text" ng-model="some_var">
	</p>
	</div>
	</div>

	<hr>

	<h3>Directives: Isolated versus Inherited Scope</h3>
	<li>both the controller and the directives write to <pre>some_var</pre></li>
	<div ng-controller="ParentController">
	<p>
	<span>parent</span>:
	<br><b>{{ some_var }}</b>
	<br><input width="400" type="text" ng-model="some_var">
	</p>
	<div>
	<isolated-directive></isolated-directive>
	<not-isolated></not-isolated>
	</div>
	</div>

	<!-- JAVASCRIPT -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.11/angular.js"></script>
	<script>
	angular.module('myApp', [])

	/**
	* Contorller Examples
	*/
	.controller('ParentController', function($scope) {
	$scope.parentWrite = function (value) {
	$scope.some_var = value;
	};

	$scope.sharedWrite = function (value) {
	$scope.some_var = value + ' (parent)';
	};
	})
	.controller('ChildController', function($scope) {
	$scope.sharedWrite = function (value) {
	$scope.some_var = value + ' (child)';
	};
	})

	/**
	* Directive Examples
	*/
	.directive('isolatedDirective', function() {
	return {
	scope: {}, // has isolated scope, no naming clahses possible
	template: '<li><span>isolated</span> <b>{{ some_var }}</b>'
	+ ' <button ng-click="write(\'my writes have no effect\')">write</button></li>',
	controller: function($scope) {
	$scope.some_var = "I control my own scope: I am isolated"
	$scope.write = function(value) {
	$scope.some_var = value;
	};
	}
	}
	})
	.directive('notIsolated', function() {
	return {
	// does not have isolate scope, will inherit values
	template: '<li><span>not isolated</span> <b>{{ some_var }}</b>'
	+ ' <button ng-click="write(\'i can write back without partitioning\')">write</button></li>',
	controller: function($scope) {
	$scope.some_var = "non-isolated wrote first"
	$scope.write = function(value) {
	$scope.some_var = value;
	};
	}
	}
	})
	;
	</script>
	<style>

	body { margin: 30px 40px; font-size: 16px; font-family: Avenir, sans-serif; }
	div { margin: 25px; padding-left: 20px; border-left: 1px solid #444; }
	li { padding-left: 5px; }
	p { display: block; }
	p span, li span { color: red;}
	pre { display: inline; background: #d6d6d6; font-size: 12px; padding: 3px; color: #444;}
	li { padding-top: 10px; }
	input { width: 300px; }
	button, input { font-size: 13px; }
	hr { margin: 40px 0;}
	</style>
	</body>
	</html>