Angular 数据绑定不起作用

Question

我有一个表单，用户可以在其中输入名称并单击“下一步”。我想要做的是，当用户单击下一步时，我想 alert 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

我认为您需要提醒类似... alert($scope.name)

Answer 2

除了@Paul Fitzgerald，点，确保 ng-controller="NewcontactCtrl" 包含在 HTML DOM.

的顶部范围内

Answer 3

尝试添加服务以便在范围内共享数据

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

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

     };
 });

app.factory('sharedData', [function () {
    var self = {};

    self.Name = "James";


    return self;
}]);

Answer 4

请看：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">.

我相信你在某处（可能是 ion-content）有一个指令，它在你的输入字段所在的位置创建一个新的范围，与你的下一步按钮所在的范围分开。

为了模拟这一点，我在下面的代码片段中使用了 ng-repeat（但我只重复一次），这会导致拆分范围的相同行为。如果您使用未经修改的控制器代码 html，您将重现您遇到的问题。

解决这个问题的方法是在绑定时'use a dot (.)'。请注意，我已将名称包装在范围内名为 '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>

Angular 数据绑定不起作用

Angular Databinding doesnt Work

javascript

angularjs

ionic-framework

ionic