javascript - ionic ng 模型无法正常工作

Question

我正在从事 ionic 项目。我不知道为什么，但是 ng-model 无法正常工作。我已经开始了新项目，默认的 starter 名为 tabs

当我打开浏览器时，我在输入字段中看到“我的自定义文本”，但是当我更改它时，在控制台中我看到相同的文本“我的自定义文本”，但它应该随着我的输入而更改。因此，更改不会应用于 $scope.getUserName。我尝试调试并发现它在 DashCtrl 的 $scope 内创建了自己的 $scope，但是当我尝试访问它时就像这样 $scope.child 我得到了 undefined。

谁能解释一下发生了什么事以及我做错了什么？

这是来自www/js/controllers.js的代码

angular.module('starter.controllers', [])

.controller('DashCtrl', function($scope) {

    $scope.getUserName = 'my custom text';

    $scope.nameChange = function(){
       console.log($scope.getUserName); 
    };

})

.controller('ChatsCtrl', function($scope, Chats) {
  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //
  //$scope.$on('$ionicView.enter', function(e) {
  //});

  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  };
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
})

.controller('AccountCtrl', function($scope) {
  $scope.settings = {
    enableFriends: true
  };
});

这是我的www/templates/tab-dash.html

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <h2>Welcome to Ionic</h2>
     <input ng-model="getUserName" ng-change="nameChange()"  name="anim" class="my-input"
         aria-describedby="inputDescription" />
    <p>
    This is the Ionic starter for tabs-based apps. For other starters and ready-made templates, check out the <a href="http://market.ionic.io/starters" target="_blank">Ionic Market</a>.
    </p>
    <p>
      To edit the content of each tab, edit the corresponding template file in <code>www/templates/</code>. This template is <code>www/templates/tab-dash.html</code>
    </p>
    <p>
    If you need help with your app, join the Ionic Community on the <a href="http://forum.ionicframework.com" target="_blank">Ionic Forum</a>. Make sure to <a href="http://twitter.com/ionicframework" target="_blank">follow us</a> on Twitter to get important updates and announcements for Ionic developers.
    </p>
    <p>
      For help sending push notifications, join the <a href="https://apps.ionic.io/signup" target="_blank">Ionic Platform</a> and check out <a href="http://docs.ionic.io/docs/push-overview" target="_blank">Ionic Push</a>. We also have other services available.
    </p>
  </ion-content>
</ion-view>

Answer 1

嘿伙计们，我刚刚弄清楚问题出在哪里。

我用 ng-model="userObject.username"替换了 ng-model="getUserName" ，在 /controllers.js 中也是如此

现在看起来像这样

.controller('DashCtrl', function($scope) {

    $scope.userObject = {
        username: 'custom'
    }

    $scope.nameChange = function(){
       console.log($scope.userObject.username); 
    };

})

要了解为什么现在一切正常，请查看这篇文章。

https://github.com/angular/angular.js/wiki/Understanding-Scopes