angular controller as watch variable in parent controller

Question

how do i watch a variable, that is bind to a parent controller?

function config($stateProvider) {
    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'home.html',
            controller: 'HomeController',
            controllerAs: 'vm'
        })

        .state('home.child', {
            url: '/child',
            templateUrl: 'child.html',
            controller: 'ChildController',
            controllerAs: 'vm'
        });
}

function HomeController($scope) {
    this.title = 'Some Title';
}

function ChildController($scope) {
    var vm = this;
    $scope.$watch('vm.title', function(current, original) {
        $log.info('title was %s', original);
        $log.info('title is now %s', current);
    });

}

The watch-Function doesn't recognize changes on the parent title..

thanks! :)

thedevlpr · Accepted Answer · 2015-08-24 15:50:23Z

6

Just access the $parent scope when referencing objects belonging to the parent. Also get used to a cleaner and more standardized way of structuring your controller JS.

HTML

<html ng-app="myApp">
  <body>
    <div ng-controller="HomeController">
      <input type="text" ng-model="title">
      <div ng-controller="ChildController"></div>
    </div>
  </body>
</html>

JS

var app = angular.module("myApp", []);
app.controller("HomeController", ['$scope', '$log', function ($scope, $log) {
  $scope.title = "Some Title";
}]);

app.controller("ChildController", ['$scope', '$log', function ($scope, $log){
  $scope.$watch('$parent.title', function(newValue, oldValue) {
    $log.info('title was %s', oldValue);
    $log.info('title is now %s', newValue);
  });
}]);

answered Aug 24, 2015 at 15:50

thedevlpr

1,11112 silver badges29 bronze badges

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

3 Comments

user3532505 Over a year ago

Thanks! $scope.$watch('$parent.vm.title' .. did the trick. Could you please tell me what would be a more standardized way of structuring the controller JS?

thedevlpr Over a year ago

Sure, the way I structured it above is what AngularJS has as structured controllers. Take a look at their documentation for controllers to get the full info on it docs.angularjs.org/guide/controller

Shujaath Khan Over a year ago

Thanks helped me either. but the $watch is hitting twice. how can we over come with this.

abpatil · Accepted Answer · 2016-12-27 07:22:56Z

0

Parent Controller :

$scope.cancelFlag = false;

Child Controller :

1) $parent.cancelFlag refers the parent controller.

2) If we make any changes in parent controller, watch will be invoked in child controller.

Example :

$scope.cancelFlag = true or false;

3) Here we can call child controller method by making changes in parent controller.

     $scope.$watch('$parent.cancelFlag', 
     function (newVal, oldVal)
     {
        if (newVal != null && newVal==true)
            $scope.childControllerMethod();
    });
    $scope.childControllerMethod= function () { };

edited Dec 27, 2016 at 7:22

abpatil

91217 silver badges21 bronze badges

answered Dec 27, 2016 at 4:57

Sivakumar Jallu

112 bronze badges

Collectives™ on Stack Overflow

angular controller as watch variable in parent controller

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related