Get parent controller scope into directive using controller instead of link

Question

I am using a 'LocalCtrl' controller for all functionality needed for directive, but how do i get scope of parent controller into the directive and scope from directive back to controller.

My directive is embedded in parent controller. I know how to use link function and isolate scope for two way binding between directive and controller. I'm not sure how to inherit parent scope by using the following structure.

<div ng-controller = "mainCtrl">
    <my-directive></my-directive>
</div>  

app.controller('mainCtrl',function ($scope) {
    $scope.mainContent = "this is main content"
});

app.controller('LocalCtrl',function () {
    var vm = this;
    vm.content = "This is Header"
});
app.directive('mydirective',function () {
    return{
        controller:'LocalCtrl as local',
        templateUrl: '<div>{{local.content}}</div>',
    }
});

Don't. Just use bindToController or use transclusion. Don't try to do fancy stuff with scopes. — gyc
– gyc, Commented Sep 20, 2016 at 12:20

Community · Accepted Answer · 2017-05-23 11:48:29Z

Directives in Angularjs has 3 scopes , as mentioned below

refer In which cases angular directive scope equals controller scope?

1 . By default , scope is false , which incase on change of the scope variable in your directive also changes the parents scope variable as it doesn't create a new scope.

 app.directive('mydirective',function () {
        return{
            controller:'LocalCtrl as local',
            templateUrl: '<div>{{local.content}}</div>',
        }
    });

scope:true , With this it will create a new child scope in child directive , which inherits prototypically from the parent scope or parents controller scope

app.directive('mydirective',function () {
    return{
        scope:true,
        controller:'LocalCtrl as local',
        templateUrl: '<div>{{local.content}}</div>',
    }
});

3: scope:{} : isolate scope , which doesn't inherit from parent's scope (could create re-usable components/directives)

view

   <div ng-controller = "mainCtrl ">
      <my-directive content="mainContent" some-fn="someFn"></my-directive>
  </div>   


    app.directive('mydirective',function () {
        return{
            scope:{
               twoWayConent:'=content',// two way data binding
               oneWayConent:'@conent', // one way binding
               someFn:'&someFn' //function binding ( 2 way)
             },
            controller:'LocalCtrl as local',
            templateUrl: '<div>{{local.content}}</div>',
        }
    });

4. using require: : if you have one directive in another directive ,In Directive Defination object (DDO) require can be used to access the parents directive controllers variables and functionalities in your child directive as below

view

 <parent-directive>
       <child-directive></child-directive>
</parent-directive>



 app.directive('childDirective',function () {
    return{
        require:'^parentDirective' // can be array of parents directive too
        link:function(scope,element,attrs,parentDirectiveController){
               console.log(parentDirectiveController) // can access parent directive controllers instances
        }
    }
});

Collectives™ on Stack Overflow

Get parent controller scope into directive using controller instead of link

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related