CODEWITHSUNDEEP
angularjsangularjs-scope
Spencer Ruport
Spencer Ruport

Reputation: 35117

Parent view doesn't reflect changes by child controller

I'm a bit new to Angular so I apologize if this is a noob question. Basically I have a controller that's trying to change the value on the parent scope. It succeeds but the parent view is never updated.

My parent view looks like so:

<html ng-app="app" ng-controller="appController">
  <head>
      ...
  </head>
  <body>
    This is the outer view.<br>
    <br>
    {{ welcome }}
    <div ng-view style="width: 100%; border: 1px solid black; padding: 10px;">

    </div>
  </body>
</html>

I'm trying to get a child controller to change the value of welcome as seen here.

app
.controller('homeController', function ($scope) {
  $scope.welcome = "Hello world!"
  $scope.$parent.welcome = "It works!!!!!!!!!";
  console.log("Home controller loaded.");
})
.controller('appController', function ($scope) {
  $scope.welcome = "It doesn't work!"
  console.log("App controller loaded.");
});

The code executes but I never see the message "It works!!!!!!!" like I expect. Here's a plunker demonstrating my issue: http://plnkr.co/edit/Dywofrx0u3QOaiKe9MsJ?p=preview

Upvotes: 4

Views: 1974

Answers (1)

BradleyDotNET
BradleyDotNET

Reputation: 61379

For changes to the parent scope to apply like that, you need to nest your data in an object.

For example, if your home controller had this:

 $scope.someObject = {};
 $scope.someObject.welcome = "Hello from the appController!"

And then your child controller:

$scope.$parent.someObject.welcome = "Hello from the homeController!";

That will work correctly.

Here's the updated Plunker: http://plnkr.co/edit/idWEgd8QRwts3zyR6vXJ?p=preview

Very, very related: Update parent scope variable

Upvotes: 5

Related Questions