Can I replace scope for isolated scope?

Question

I have directive in which I have scope mentioned as :

        return {
         restrict: 'AE',
         transclude: true,
         scope: {
             model: '=',
             menu: '='
         },}

so my question is apart from model and menu variables what all variables are accessible to me? Does Isolated scope inherits parent scope variables ?

If I don't want to use isolated scope then what could be done where I can set these two variables in directives and inherits all variables from parent scope ?

Thank you.

Answer 1

If I understood correctly, what you want to achieve is a new scope inheriting all the parent stuff. That is easy to do.

By default a directive uses the parent scope, but you can do two different things:

scope: {} // Isolated scope

or:

scope: true // new scope inheriting from parent

So with the later, you will have all the parent scope has but you can set new stuff there and the parent won't know. Example:

http://plnkr.co/edit/oL5ALPvkEzkiXSuOSNnE?p=preview

I hope this is what you asked for.

EDIT: I edited the plunker. The idea with new scopes that inherits from others is:

If parent has a primitive like name the child will inherit it, but if you do something like:

childScope.name = ".." you are not modifying the parent name, you are shadowing it, AKA creating a new name that will hide the parent name. this means that the parent will never know if the child modified the name.

foo is something created in the new child scope, that means that the parent will never know.

user is not a primitive, it is an object and when the child modifies its name, it is not shadowing the entire user, it is just modifying its value:

childScope.user.name = "Fox"

This is getting the user reference and modifying its value, is not modifying the entire user, so you are not shadowing it. If you do:

childScope.user = { name: 'Foo' };

Then you're creating an entire user, AKA you're creating a new reference so that will shadow the parent user and the parent-child relationship of that object will end.

This is what we call the dot rule.

Answer 2

If the scope property of the directive definition is set to an { /* object hash */ } an isolated scope is created for your directive. If you set the scope property to true a new scope is generated that inherits from the parent scope.

See this plunker for a demo on directive scope behaviour.

If you don't want to isolate the scope but do want to pass argument to the directive you can use the $observe method of the attributes service.

function linkingFn(scope, elm, attrs, ctrl) {
  // get the attribute value
  console.log(attrs.ngModel);

  // change the attribute
  attrs.$set('ngModel', 'new value');

  // observe changes to interpolated attribute
  attrs.$observe('ngModel', function(value) {
    console.log('ngModel has changed value to ' + value);
  });
}

Creating a two way binding without an isolated scope can be done with the $parse service.

Answer 3

when you set scope like this, it's an isolated scope, and as its name says, it doesn't inherit any property from parent scope.

However, you can directly define variable on the scope, in the directive link method, like this:

.directive('someDirective', function(){
    return {
        restrict: 'C',
        link: function(scope, element, attrs){
            scope.newVariable = "newVariable"
        }
    }
}

it adds newVariable to your scope.Hope it helps~

More info on directive can be seen here, http://docs.angularjs.org/guide/directive. There is a section with the name Creating a Directive that Manipulates the DOM