how to access ng-model in nested controller in angularjs

Question

I'm working with a parent controller and several children (in parallel).

router

$stateProvider
  .state('page', {
    url: '/page1',
    templateUrl: 'templates/page.html',
    controller: 'pageCtrl'
})

page.html

<label class="item item-input">
    <span class="input-label">Pedido</span>
    <input type="number" ng-model="pedido">
</label>

<div class="item item-input" ng-controller="matriculaCtrl as vm">
    <label class="item-input-wrapper">
      <span class="input-label">Matricula</span>
      <input type="text" placeholder="" ng-model="vm.matricula">
    </label>
    <button class="button button-small button-positive" ng-click="vm.scan()">
      <i class="icon ion-qr-scanner"></i>
    </button>
</div>

<!--more controllers-->

<button 
  class="button button-block button-positive icon-right ion-chevron-right"
  ng-click="send(pedido, vm.matricula)">
    Enviar 
</button>

controller

.controller('pageCtrl', ['$scope', '$stateParams', 'CustomerService', function ($scope, $stateParams, CustomerService) {
  $scope.send = function(pedido, matricula){
        console.log(pedido+'-'+matricula);
  }
}])

.controller('matriculaCtrl', function ($scope, $rootScope, $cordovaBarcodeScanner, $ionicPlatform) {
    var vm = this;

    vm.scan = function () {
        $ionicPlatform.ready(function () {
            $cordovaBarcodeScanner
                .scan()
                .then(function (result) {
                    vm.matricula = result.text;
                }, function (error) {
                    vm.matricula = 'Error: ' + error;
                });
        });
    };
    vm.matricula = '';
})

In the send function of the button, the first model works fine, but I can not access the second model, it always returns me undefined. Is there another way to do this?

thanks in advance

I think that the second controller 'matriculaCtrl' should be converted to a service. — JFPicard
– JFPicard, Commented Jul 11, 2017 at 18:47
You can refer this for more insight stackoverflow.com/questions/21453697/… — Vivz
– Vivz, Commented Jul 11, 2017 at 19:04

Nathan Beck · Accepted Answer · 2017-07-11 20:38:00Z

The reason you see undefined for the vm.matricula object is that your button is defined OUTSIDE the scope controlled by vm -- the button's send(pedido, vm.matricula) method has no idea what vm is.

If you were to include the button INSIDE the div controlled by vm, vm.matricula should come in fine. I didn't do it here, but I suggest using ctrl as syntax with every controller once you start nesting them - it makes things much clearer.

<!-- pageCtrl scope -->

<!-- start of vm scope -->
<div class="item item-input" ng-controller="matriculaCtrl as vm">
  <label class="item-input-wrapper">
    <span class="input-label">Matricula</span>
    <input type="text" placeholder="" ng-model="vm.matricula">
  </label>
  <button class="button button-small button-positive" 
          ng-click="vm.scan()">
    <i class="icon ion-qr-scanner"></i>
  </button>

  <!-- button is now inside the vm scope -->
  <button class="button button-block button-positive icon-right ion-chevron-right"
          ng-click="send(pedido, vm.matricula)">
    Enviar 
  </button>
</div> 
<!-- end vm scope -->

Collectives™ on Stack Overflow

how to access ng-model in nested controller in angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related