javascript - Angular 数据绑定(bind)不起作用

Question

我有一个表单，用户将在其中输入名称并单击“下一步”。我想要做的是，当用户单击“下一步”时，我想提醒 toChat 函数内$scope.name 的更新值，但会提示初始值，即 James.如何访问 Angular 函数内的更新值？我在理解 AngularJs 中共享变量时遇到了一些严重的问题。

js

.controller('NewcontactCtrl', function($scope,$rootScope, $ionicHistory,$window) {

     $scope.name='James';
     $scope.myGoBack = function() {
        $ionicHistory.goBack();
      };
     $scope.toChat = function() {
         alert($scope.name);

     };
 })

html

<ion-view view-title="New contact">
    <ion-nav-back-button>
    </ion-nav-back-button>

     <ion-nav-buttons side="primary">
      <button class="button" ng-click="myGoBack()">
       Cancel 
      </button>
    </ion-nav-buttons>

     <ion-nav-buttons side="secondary">
      <button class="button" ng-click="toChat()" >
       Next
      </button>
    </ion-nav-buttons>

    <ion-content scroll="false" has-header="false" padding="true" >

        <div class="list">
            <label class="item item-input">
                <input type="text" placeholder="Name" ng-model="name" />
            </label> 
            <label class="item item-input">
                <textarea placeholder="Notes" ng-model="notes" rows="10"></textarea>
            </label> 
        </div>   
</ion-content>
</ion-view>

有人可以帮忙吗？

Answer 1

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

上面最相关的部分:

Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope. It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved. ...

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models – watch 3 minutes worth. Misko demonstrates the primitive binding issue with ng-switch.

Having a '.' in your models will ensure that prototypal inheritance is in play. So, use <input type="text" ng-model="someObj.prop1"> rather than <input type="text" ng-model="prop1">.

我相信您在某处有一个指令(可能是 ionic 内容)，该指令正在创建一个新的范围，其中您的输入字段所在的范围与“下一步”按钮所在的范围分开。

为了模拟这个，我使用了 ng-repeat在下面的代码片段中(但我只重复一次)，这会导致分割范围的相同行为。如果您使用未经修改的 Controller 代码与此 html，则会重现您遇到的问题。

解决这个问题的方法是在绑定(bind)时“使用点 (.)”。请注意，我已将名称包装在作用域上名为“data”的对象中，因此现在您将其称为 data.name而不仅仅是name .

(function() {
  'use strict';

  angular.module('myApp', [])
    .controller('NewcontactCtrl', function($scope, $window) {

    $scope.repeaterTest = [1];
      $scope.data = {name: 'James'};
      $scope.toChat = function() {
        $window.alert($scope.data.name);
      };
    });

})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="NewcontactCtrl">
    <label ng-repeat="test in repeaterTest">
      <input type="text" placeholder="Name" ng-model="data.name" />
    </label>
    <button class="button" ng-click="toChat()">
      Next
    </button>
  </div>

</div>