Question

我正在使用父控制器和几个孩子（并行）。

路由器

$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('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 = '';
})

在按钮的发送功能中，第一个模型工作正常，但我无法访问第二个模型，它总是返回我未定义。还有另一种方法吗？

提前致谢

Answer 1

您看到undefined对象vm.matricula的原因是您的按钮已在vm控制的范围外定义 - 按钮的send(pedido, vm.matricula)方法不知道vm是什么。

如果你要在vm控制的div中加入按钮，那么vm.matricula就可以了。我没有在这里做，但我建议在开始嵌套时使用每个控制器使用ctrl as语法 - 它会使事情更加清晰。

<!-- 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 -->

如何在angularjs中

1 个答案: