CODEWITHSUNDEEP
javascriptangularjs
Sagar Ganesh
Sagar Ganesh

Reputation: 2584

Unable to update Child controllers scope valriable

Im new to angular js and im not able to figure out how to change the child controller scope variable from parent controller. Here is the code snippet for that: 

var mainApp = angular.module("mainApp", []);

var parentCtrl = function($rootScope, $scope, shareService, $log){ 
    shareService.setDetails($scope.pdetails);
}

var mainCtrl1 = function($rootScope, $scope, shareService, $log){
    $scope.msg = "Controller 1";
    $scope.details = shareService.details;//shareService.details;
}

var mainCtrl2 = function($rootScope, $scope, shareService){
    $scope.msg = "Controller 2";
    $scope.details = shareService.details;//shareService.details;
}

parentCtrl.$inject = ["$rootScope", "$scope", "shareService", "$log"];
mainCtrl1.$inject = ["$rootScope", "$scope", "shareService", "$log"];
mainCtrl2.$inject = ["$rootScope", "$scope", "shareService", "$log"];

 mainApp.controller("parentController", parentCtrl)
        .controller("mainController1", mainCtrl1)
        .controller("mainController2", mainCtrl2)
        .factory("shareService", function(){
            var shareData = {
                details : "sadfgs detaisdfadsfasdf..",
                setDetails: function(value){
                    this.details = value;
                }
            };
            return shareData;
        });
<html>
   <head>
      <title>Angular JS Views</title>
      <script src='lib/angular.js'></script>
      <script src='js/mainApp.js'></script>
      <script src='js/studentController.js'></script>
   </head>
   
   <body ng-app = 'mainApp' ng-controller='parentController' ng-strict-di>
     <div ng-controller='mainController1'>
       1. Msg : {{msg}}<br/>
          Share Details: {{details}}<br/><br/>
     </div>
     <div ng-controller='mainController2'>
       2. Msg : {{msg}}<br/>
          Share Details: {{details}}<br/><br/>
     </div>
     <input type='text' ng-model='pdetails'/>  
   </body>
</html>

Here is the Plunker link:

https://plnkr.co/edit/hJypukqMmdHSEZMVnkDO?p=preview

Upvotes: 0

Views: 621

Answers (2)

Kashif ali
Kashif ali

Reputation: 149

In order to change value of child controller from parent controller you can use $broadcast on $scope. syntax

$scope.$broadcast(event,data);

$broadcast is used to trigger an event(with data) to the child scope from current scope. In child controller use $on to receive the event(with data).

Here id the code snippet:

app.controller("parentCtrl",function($scope){
$scope.OnClick=function()
{
  $scope.$broadcast("senddownward",$scope.messege);
}
});
app.controller("childCtrl",function($scope){
$scope.$on("senddownward",function(event,data)
{
  $scope.messege=data;
});
});

In this example I am broadcasting the event on ng-click,you can use some other custom event.like $watch on $scope.

See this example https://plnkr.co/edit/efZ9wYS2pukE0v4JsNCC?p=preview

P.S. you can change the name of event from senddownward to whatever you want

Upvotes: 1

Alexander Kravets
Alexander Kravets

Reputation: 4395

You can access the parent's scope properties directly due to the scope inheritance:

 <div ng-controller='mainController1'>
      Share Details: {{pdetails}}
 </div>

Your example does not work because the controllers get executed only once before the view is rendered, pdetails is empty at that moment.

To monitor the changes to pdetails, you can use $watch in the child controller:

$scope.$watch('pdetails', function(newVal) {
  $scope.details = newVal;
});

Upvotes: 0

Related Questions