Skip to content Skip to sidebar Skip to footer
Home / Angularjs / Javascript

AngularJS Controller Not Working In Nested Controller

Post a Comment
Got a questions regarding the select option value, i can get the value as the select options changed, but i am not able to get the value of the select options thru the search butto

Solution 1:

If you want to access a value from a scope, you've got to make sure it's in that scope or in the scope of it's ancestors. Now your ng-model is declared in the child scope. If you want to access it from the parent scope, you'll need to declare it in the parent scope. That way when the model get changed, it changed in the parent scope and thus accessible in both scopes:

Working example:

angular.module('App', []);

angular.module('App').controller('ControllerParent', [
             '$scope',
    function ($scope) {
        // Model value declared in parent scope
        $scope.selected = {};
    }
]);

angular.module('App').controller('ControllerChild', [
             '$scope',
    function ($scope) {
        $scope.options = [{
            id: 1,
            name: 'Alpha'
        }, {
            id: 2,
            name: 'Bravo'
        }, {
            id: 3,
            name: 'Charlie'
        }, {
            id: 4,
            name: 'Delta'
        }];
    }
]);
<!DOCTYPE html>
<html ng-app="App">
    <head>
        <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    </head>
    <body ng-controller="ControllerParent">
        <div ng-controller="ControllerChild">
            <select ng-model="selected.value" ng-options="option.name for option in options"></select>
            ControllerSub: {{selected}}
        </div>
        ControllerMain: {{selected}}
    </body>
</html>

Failing example:

angular.module('App', []);

angular.module('App').controller('ControllerParent', [
             '$scope',
    function ($scope) {}
]);

angular.module('App').controller('ControllerChild', [
             '$scope',
    function ($scope) {
        // Model value declared in child scope
        $scope.selected = {};
        $scope.options = [{
            id: 1,
            name: 'Alpha'
        }, {
            id: 2,
            name: 'Bravo'
        }, {
            id: 3,
            name: 'Charlie'
        }, {
            id: 4,
            name: 'Delta'
        }];
    }
]);
<!DOCTYPE html>
<html ng-app="App">
    <head>
        <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
    </head>
    <body ng-controller="ControllerParent">
        <div ng-controller="ControllerChild">
            <select ng-model="selected.value" ng-options="option.name for option in options"></select>
            ControllerSub: {{selected}}
        </div>
        ControllerMain: {{selected}}
    </body>
</html>

Descendant scopes have access to the values of their ancestors. Ancestors don't have access to values of their descendants.


Solution 2:

Another way to work on nested controllers using the controller as syntax.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AngularJS Tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <script>
      angular.module('app', []);

      angular.module('app').controller("MainController", function(){
          var vm = this; //The vm in this case means viewmodel
          vm.title = 'AngularJS Nested Controller Example';
      });

      angular.module('app').controller("SubController", function(){
          var vm = this;
          vm.title = 'Sub-heading';
      });
    </script>
</head>
<body ng-app='app' ng-controller='MainController as main'>
<div class='container'>
  <h1>{{main.title}}</h1>
  <div ng-controller='SubController as sub'>
    <h2>{{sub.title}}</h2>
    <p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
  </div>
</div>
</body>
</html>

Post a Comment for "AngularJS Controller Not Working In Nested Controller"