AngularJS Controller not working in nested Controller

Question

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 button, it will just give a value undefined. So where is the problem?

index.html

<div ng-controller="MatIncListCtrl">
  <button class="fluid labeled icon blue ui button top attached"><i class="ellipsis vertical icon"></i>Toggle Filters Pane</button>
  <div class="ui attached segment" uib-collapse="isCollapsed">
    <form role="form" class="ui form">
      <div class="fields">
        <div class="twelve wide field" ng-controller="DistinctSupplierCtrl">
          <label>Supplier</label>
          <select ng-model="Supplier" class="ui fluid dropdown" ng-options="x.supp_no as x.supp for x in data" ng-change="selectAction()">
            <option></option>
          </select>
        </div>
      </div>
    </form>
    <br />
    <button type="button" class="ui orange fluid labeled icon button" tabindex="0" ng-click="FindMatInc()"><i class="search icon"></i>Search</button>
  </div>
</div>

controller.js

.controller('DistinctSupplierCtrl', function($scope, $http) {
  $scope.selectAction = function() {
    console.log($scope.Supplier);
  };
  var xhr = $http({
    method: 'post',
    url: 'http://localhost/api/list-distinct-supp.php'
  });
  xhr.success(function(data){
    $scope.data = data.data;
  });
})

.controller('MatIncListCtrl', function ($scope, $http) {
  $scope.FindMatInc = function (){
    console.log($scope.Supplier);
  }
});

iH8 · Accepted Answer · 2016-02-23 02:54:29Z

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.

Premraj · Accepted Answer · 2017-05-10 16:36:55Z

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>

Collectives™ on Stack Overflow

AngularJS Controller not working in nested Controller

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related