new scope that inherits from parent within angular directives

Question

suppose I do this:

sAngular.app.directive('dostuff', ['$compile', function($compile){
  return   {
    restrict : 'C',
    scope: {
      someVar : '='
    },
    link : function(scope, element, attrs){  
      element.click(function(){
           //do stuff
        scope.someVar = 'somethingelse';
        var dropdownOutput = template();
        var compiledOutput = $compile(dropdownOutput)(scope);
        scope.$apply();
     });
    }    
  }
}]);

how can I make the scope of this directive inherit a variable from the parent scope and yet still have it to be an 'isolate' scope

for instance from angular docs:

= or =attr - set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of the attr attribute. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localModel:'=myAttr' }, then widget scope property localModel will reflect the value of parentModel on the parent scope. Any changes to parentModel will be reflected in localModel and any changes in localModel will reflect in parentModel.

however in that case since "any changes in localModel will reflect in parentModel" if I modify a variable in the scope in that directive and then do scope.apply() in that case, it will reflect in the parent scope accordingly and the parent template will be updated with the changes

I also tried doing "scope : true" as a parameter but changes to the scope there followed by the scope.$apply(); will also propagate to the original scope...

Is there a way to make it so that I can copy a scope from the parent scope and still have changes in the variables in that scope not propagate to the parent scope?

not 100% clear what you are wanting..where's demo that provides overview of situation? Really not clear what `compiledOutput` is doing — charlietfl, Apr 06 '13 at 21:43
@pillarOfLight If you don't want to propagate the isolate scope property changes to the parent scope, then use `@` instead of `=`. Sorry correction made — Rajkamal Subramanian, Apr 06 '13 at 21:48
@rajkamal, using & will instead turn the scope variable into a function instead of having the scope variable inherit from parent scope variable — pillarOfLight, Apr 06 '13 at 21:50
@rajkamal, using @ doesn't work either...that's supposed to reference the dom attribute element and the value will always be a string instead of whatever the scope variable is (see http://docs.angularjs.org/guide/directive scope section) — pillarOfLight, Apr 06 '13 at 21:58
Have you tried using scope.$parent.variableName in the directive? — Ketan, Apr 06 '13 at 22:34
This is a dupe of http://stackoverflow.com/q/15536435/295797, which has a pretty good answer. — Roy Truelove, Apr 07 '13 at 00:36

score 12 · Accepted Answer · edited May 23 '17 at 12:34

how can I make the scope of this directive inherit a variable from the parent scope and yet still have it to be an 'isolate' scope

Using the word "inherit" here is a bit confusing. An isolate scope does not (prototypically) inherit from its parent scope. Angular does put a $parent property on the isolate scope, so you could access parent scope properties that way, but best practice is to not use $parent. If you want an isolate scope, the only way to pass parent scope property values into that isolate scope is to use =, @, or &. All three will actually work (even '&' could be used to pass property values via an expression – for the curious).

On your isolate scope (or if you use scope: true), you can create new properties. These new properties will not propagate back to the parent. So, if you want to alter a property value that you passed into the directive, you can simply copy it to some new property on the directive's scope.

Here's an example using @, the "one-way string" syntax. To get the (interpolated) value of your parent scope property (as a string), use {{}}s in the HTML:

<div class="dostuff" some-var="{{interpolateThisParentScopePropertyPlease}}">

sAngular.app.directive('dostuff', ['$compile', function($compile){
  return   {
    restrict : 'C',
    scope: { someVar : '@' },
    link : function(scope, element, attrs){  
      element.click(function(){
        scope.myLocalDirectiveProperty = scope.someVar;
        scope.someOtherDirectiveProperty = 'somethingelse';
        var dropdownOutput = template();
        var compiledOutput = $compile(dropdownOutput)(scope);
        scope.$apply();
     });
    }

If you want to pass an object to the directive, use the '=' syntax, and then use angular.copy() to make a copy of the object inside the directive.

As per the comment request:

<div class="dostuff" some-obj="parentScopeObj">

sAngular.app.directive('dostuff', ['$compile', function($compile){
  return   {
    restrict : 'C',
    scope: { someObj : '=' },
    link : function(scope, element, attrs){  
      element.click(function(){
        scope.myLocalDirectiveObjProperty = angular.copy(scope.someObj);
        ...
        scope.$apply();
     });
    }

thx for the reply, can you give me an example of the '=' syntax for passing in objects as that is what I'm interested in — kamikaze_pilot, Apr 07 '13 at 03:21
what if you want to use the same variable name as the parent scope? is there a way? If I make some-obj parent-scope-obj and then modify scope.parentScopeObj in the directive will it affect the parent scope's parentScopeObj? — kamikaze_pilot, Apr 07 '13 at 03:30
See if this answers your question: The attribute name (e.g., `parent-scope-obj`) that you use in the HTML is not related to the parent scope property name. E.g., suppose the parent scope property is `prop1`, and you pass it to the directive as `
`. In the directive, you can name that passed property whatever you want, say `dirProp1`, using this syntax: `scope: { dirProp1: '=parentScopeObj' }`. Now, directive scope property `dirProp1` and parent scope property `prop1` are "linked" -- changing either one will always change the other. — Mark Rajcok, Apr 07 '13 at 03:42

new scope that inherits from parent within angular directives

1 Answers1