ng-model绑定的变量在controller中为undefined

举例来说有如下AngularJS代码:

  1.  angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
  2.  .config(function($stateProvider, $urlRouterProvider) {
  3.    $stateProvider.state('app', {
  4.      url: '/app',
  5.      abstract: true,
  6.      templateUrl: 'template/app.html'
  7.    })
  8.    .state('app.search', {
  9.      url: '/search',
  10.      views: {
  11.        'content': {
  12.          templateUrl: 'templates/search.html',
  13.          controller: 'SearchCtrl'
  14.        }
  15.      }
  16.    });
  17.  
  18.    $urlRouterProvider.otherwise('/app/search');
  19.  });
  20.  
  21.  angular.module('starter.controllers', [])
  22.  .controller('SearchCtrl', function($scope) {
  23.      $scope.onSearch= function() {
  24.          console.log($scope.keyword);
  25.      };
  26.  });

模板文件search.html内容如下:

  1.  <ion-view>
  2.      <ion-content class="has-header">
  3.          <form ng-submit="onSearch()" class="bar bar-header item-input-inset">
  4.              <label class="item-input-wrapper">
  5.                  <i class="icon ion-ios7-search placeholder-icon"></i>
  6.                  <input type="search" placeholder="Search..." ng-model="keyword">
  7.              </label>
  8.          </form>
  9.      </ion-content>
  10.  </ion-view>

这个时候无论在文本框中输入任何东西按“搜索”之后,keyword的值始终是undefined。不过如果在ion-content中增加ng-controller=”SearchCtrl”之后则会正常赋值,但这样的话过于繁琐了。

正确的做法是,首先ng-model不要直接设置成字符串,而是设置成一个object对象,然后需要在controller对这个对象进行初始化。代码如下:

  1.  angular.module('starter.controllers', [])
  2.  .controller('SearchCtrl', function($scope) {
  3.      // 对query进行初始化
  4.      $scope.query = {};
  5.  
  6.      $scope.onSearch= function() {
  7.          console.log($scope.query.keyword);
  8.      };
  9.  });

模板文件search.html内容如下:

  1.  <ion-view>
  2.      <ion-content class="has-header">
  3.          <form ng-submit="onSearch()" class="bar bar-header item-input-inset">
  4.              <label class="item-input-wrapper">
  5.                  <i class="icon ion-ios7-search placeholder-icon"></i>
  6.                  <!-- ng-model 采用对象的形式 -->
  7.                  <input type="search" placeholder="Search..." ng-model="query.keyword">
  8.              </label>
  9.          </form>
  10.      </ion-content>
  11.  </ion-view>

参考资料:
ng-model is undefined in controller
Nested Scopes in AngularJS

发表评论

电子邮件地址不会被公开。 必填项已用*标注