Angularjs inheriting parent scope confusion

Question

I have a controller that's inside another controller.

<div ng-controller="post">
  <div ui-if="isAllowed">
    <footer ng-controller="footer"></footer>
  </div>
</div>

I believe the ui-if creates a new scope so there's 3 scopes here.

I want the footer controller to be able to access the scope of post.

.controller('post', function($scope) {
  $scope.foo = "bar"
})

I can easily do $scope.$parent.$parent.foo but I read that scopes are supposed to automatically inherit from the parent, and the parent thing is just super unwieldy.

Quote from Angularjs wiki:

(If you really want to share data via controllers scope inheritance, there is nothing you need to do. The child scope will have access to all of the parent scope properties. See also Controller load order differs when loading or navigating)

How do I access foo from the footer scope?

You just directly access them as if they were in your main scope. Plunk Here — rGil
– rGil, Commented May 27, 2013 at 22:51
@rGil oh you're right. I was looking at Batarang which showed the scopes separately, but now I realize that's not what that means haha. Thank you. — Harry
– Harry, Commented May 27, 2013 at 22:57

emre nevayeshirazi · Accepted Answer · 2013-05-27 22:54:13Z

3

As wiki said, you do not need to do anything. Just access it via its name.

<div ng-controller="post">
  <div ui-if="isAllowed">
    <footer ng-controller="footer">
        {{ fooB }} 
    </footer>
  </div>
</div>

function post($scope) {
    $scope.fooA = 'Foo A';
}

function footer($scope) {
    $scope.fooB = $scope.fooA + " and Foo B";
}

For instance above will render Foo A and Foo B

Fiddle here.

edited May 27, 2013 at 22:54

answered May 27, 2013 at 22:41

emre nevayeshirazi

19.3k12 gold badges67 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hcabnettek Over a year ago

What could the problem be if this in not working? I'm using Angular-loader and when I try to call methods on a parentscope, I get an 'undefined' error that method doesn't exist on object? Any ideas how to remedy that?

Martin Connell Over a year ago

An 'isolated' scope in a directive is a reason why this will not work. NB: setting scope:true in the directive definition ensures you don't get an isolated scope but get a normal one which will inherit properties from the ancestor scope(s).

Collectives™ on Stack Overflow

Angularjs inheriting parent scope confusion

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related