etcetc · July 27, 2015 02:03
diff --git a/directiveSCopeWatch.html b/directiveSCopeWatch.html
 <!-- 
  This gist is just an exploration of various types of scopes on a directive.  I had mistakenly thought that 
  an isolate scope is a mechanism for selectively passing elements in the directive scope to the scope.  So for example
  if a parameter "p1" was defined in the outer scope of a directive, you could name it in the isolated scope and it 
  would be incorporated into the directive scope.  However, this only applies to attributes that are on the directive itself
  and not parameters that are in the scope at large.

  If we use the "@", we are just bringing in the string assocaited with the attribute
  If we use the "=", we are using the attribute value as a reference, and essentially evaluating it.  This enables us 
  to watch that parameter for changes.  It doesn't make any sense to "watch" a parameter that was brought in using "2" because it's value will never change - it's just a string
 -->
 <html ng-app="myapp">

  <head lang="en">
    <meta charset="utf-8">
    <title>Scopes and Directives</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
  </head>
  
  <body>  
    <input type="text" ng-model="field1" x="foo" param="p1" at-scope /> 
    <input type="text" ng-model="field2" param="p1" equal-scope />
    <input type="text" ng-model="field3" param="p1" inherit-scope />
  </body>
  
  
  <script type="text/javascript">

    angular.module('myapp', [])
    .directive('atScope', function($parse) {
      return {
        restrict: "A",
        require: "ngModel",
        scope: {ngModel: "@", x: "@", param: "@" },
        // scope: true,
        link: function(scope, elm, attrs, ctrl) {
          console.log("attrs.ngModel = "+attrs.ngModel);
          var getter = $parse("x")
          console.log("getter = "+getter(scope));
          console.log("scope.x = "+scope.x);
          console.log("scope.param = "+scope.param);
          scope.$watch(getter(scope),function(newValue,oldValue) {
            console.log("In atScope newValue="+newValue);
          })
        }            
      };
    })
    .directive('equalScope', function($parse) {
      return {
        restrict: "A",
        require: "ngModel",
        scope: {ngModel: "=", param: "=" },
        link: function(scope, elm, attrs, ctrl) {
          console.log("attrs.ngModel = "+attrs.ngModel);
         console.log("scope.ngModel = "+scope.ngModel);
         var getter = $parse("ngModel")
         console.log("getter = "+getter(scope));
        console.log("scope.param = "+scope.param);
        scope.$watch("ngModel",function(newValue,oldValue) {
            console.log("In equalScope newValue="+newValue);
          })
        }
      };
    })
    .directive('inheritScope', function($parse) {
      return {
        scope: true,
        compile: function(elm,attrs) {
          return {
            post: function(scope, elm, attrs, ctrl) {
              console.log("attrs.ngModel = "+attrs.ngModel);
              console.log("scope.ngModel = "+scope.ngModel);
              var getter = $parse(attrs.ngModel)
              console.log("getter = "+getter(scope));
              console.log("param = "+scope.param);
              console.log("p1 = "+scope.p1);
              scope.$watch(attrs.ngModel,function(newValue,oldValue) {
                console.log("In inheritScope newValue="+newValue);
              })
            }            
          }
        }
      };
    })  
    .run(function($rootScope) {
      console.log("Setting field values");
      $rootScope.p1 = "Some parameter in scope"
      $rootScope.field1 = "isolated w/ @ ";
      $rootScope.field2 = "isolated w/ equal ";
      $rootScope.field3 = "inherit";
      $rootScope.field4 = "isolaed w/ @ and inherit";
    });
  
  </script>
 </html>
	<!--
	This gist is just an exploration of various types of scopes on a directive. I had mistakenly thought that
	an isolate scope is a mechanism for selectively passing elements in the directive scope to the scope. So for example
	if a parameter "p1" was defined in the outer scope of a directive, you could name it in the isolated scope and it
	would be incorporated into the directive scope. However, this only applies to attributes that are on the directive itself
	and not parameters that are in the scope at large.

	If we use the "@", we are just bringing in the string assocaited with the attribute
	If we use the "=", we are using the attribute value as a reference, and essentially evaluating it. This enables us
	to watch that parameter for changes. It doesn't make any sense to "watch" a parameter that was brought in using "2" because it's value will never change - it's just a string
	-->
	<html ng-app="myapp">

	<head lang="en">
	<meta charset="utf-8">
	<title>Scopes and Directives</title>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
	</head>

	<body>
	<input type="text" ng-model="field1" x="foo" param="p1" at-scope />
	<input type="text" ng-model="field2" param="p1" equal-scope />
	<input type="text" ng-model="field3" param="p1" inherit-scope />
	</body>


	<script type="text/javascript">

	angular.module('myapp', [])
	.directive('atScope', function($parse) {
	return {
	restrict: "A",
	require: "ngModel",
	scope: {ngModel: "@", x: "@", param: "@" },
	// scope: true,
	link: function(scope, elm, attrs, ctrl) {
	console.log("attrs.ngModel = "+attrs.ngModel);
	var getter = $parse("x")
	console.log("getter = "+getter(scope));
	console.log("scope.x = "+scope.x);
	console.log("scope.param = "+scope.param);
	scope.$watch(getter(scope),function(newValue,oldValue) {
	console.log("In atScope newValue="+newValue);
	})
	}
	};
	})
	.directive('equalScope', function($parse) {
	return {
	restrict: "A",
	require: "ngModel",
	scope: {ngModel: "=", param: "=" },
	link: function(scope, elm, attrs, ctrl) {
	console.log("attrs.ngModel = "+attrs.ngModel);
	console.log("scope.ngModel = "+scope.ngModel);
	var getter = $parse("ngModel")
	console.log("getter = "+getter(scope));
	console.log("scope.param = "+scope.param);
	scope.$watch("ngModel",function(newValue,oldValue) {
	console.log("In equalScope newValue="+newValue);
	})
	}
	};
	})
	.directive('inheritScope', function($parse) {
	return {
	scope: true,
	compile: function(elm,attrs) {
	return {
	post: function(scope, elm, attrs, ctrl) {
	console.log("attrs.ngModel = "+attrs.ngModel);
	console.log("scope.ngModel = "+scope.ngModel);
	var getter = $parse(attrs.ngModel)
	console.log("getter = "+getter(scope));
	console.log("param = "+scope.param);
	console.log("p1 = "+scope.p1);
	scope.$watch(attrs.ngModel,function(newValue,oldValue) {
	console.log("In inheritScope newValue="+newValue);
	})
	}
	}
	}
	};
	})
	.run(function($rootScope) {
	console.log("Setting field values");
	$rootScope.p1 = "Some parameter in scope"
	$rootScope.field1 = "isolated w/ @ ";
	$rootScope.field2 = "isolated w/ equal ";
	$rootScope.field3 = "inherit";
	$rootScope.field4 = "isolaed w/ @ and inherit";
	});

	</script>
	</html>