角数据绑定不工作 [英] Angular Databinding doesnt Work

问题描述

我有一个表单，用户输入一个名称，然后单击下一步。我想要做的是，当用户点击下一步，我想警报的更新值 $ scope.name toChat 函数中，但初始值警报，这是詹姆斯。如何访问角函数内部更新的价值？我有一些严重的问题理解AngularJs内共享变量。

JS

  .controller（'NewcontactCtrl'，函数（$范围，$ rootScope，$ ionicHistory，$窗口）{     $ scope.name ='詹姆斯';
     $ scope.myGoBack =功能（）{
        $ ionicHistory.goBack（）;
      };
     $ scope.toChat =功能（）{
         警报（$ scope.name）;     };
 }）
 

HTML

 ＆LT;离子查看查看标题=新建联系人＆GT;
    ＆LT;离子NAV-后退按钮＆GT;
    ＆LT; /离子NAV-后退按钮＆GT;     ＆LT;离子NAV-按键侧=主＆GT;
      ＆LT;按钮类=按钮NG点击=myGoBack（）＆GT;
       取消
      ＆LT; /按钮＆GT;
    ＆LT; /离子NAV-按钮＆GT;     ＆LT;离子NAV-按键侧=次要＆GT;
      ＆LT;按钮类=按钮NG点击=toChat（）＆GT;
       下一个
      ＆LT; /按钮＆GT;
    ＆LT; /离子NAV-按钮＆GT;    ＆LT;离子含量滚动=假有头=false的填充=真＆GT;        ＆LT; D​​IV CLASS =清单＆GT;
            ＆LT;标签类=逐项输入＆GT;
                ＆LT;输入类型=文本占位符=名称NG模型=名/＆GT;
            ＆LT; /标签＆gt;
            ＆LT;标签类=逐项输入＆GT;
                ＆LT; textarea的占位符=注意事项NG-模式=笔记行=10＆GT;＆LT; / textarea的＆GT;
            ＆LT; /标签＆gt;
        ＆LT; / DIV＆GT;
＆LT; /离子含量＆GT;
＆LT; /离子视图＆gt;
 

谁能帮助？

解决方案

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

在上面的最相关的部分：

  

继承范围通常是简单的，你经常甚至不需要知道它正在发生......直到你尝试 2路数据绑定（即表单元素，NG-模型） 以原始从孩子域内父范围定义（如数字，字符串，布尔值）。它不工作的方式大多数人期望它应该工作。什么情况是，孩子得到的范围自有物业，隐藏/阴影的同名parent属性。这不是AngularJS做 - 这是原型继承如何JavaScript的工作。新AngularJS开发商往往没有意识到NG重复，NG-开关，NG-查看和NG-包括所有创造新的子范围，所以问题往往显示出来时，这些指令都参与其中。 ...

  
  

这与原语的问题可以通过以下的总是有一个'。在NG-车型 - 看3分钟价值。 MISKO演示与NG-开关原始结合的问题。

  
  

有一个。在您的模型将确保原型继承中发挥作用。所以，使用
  ＆LT;输入类型=文本NG模型=someObj.prop1＆GT; 而不是
  ＆LT;输入类型=文本NG模型=为prop1方式＆gt;

我相信你有一个指令，在那里的某个地方正在创建一个新的范围，在您输入字段（可能离子含量），从那里你的下一个按钮的范围分隔。

要模拟这个，我使用 NG-重复在下面的代码片段（但我重复一次），这会导致分裂同一范围的行为。如果你使用你的控制器code未修改与这个网站，你会重现您所遇到的问题。

解决这个问题的解决方案是使用点（。）绑定时。请注意，我裹要求的范围数据对象中的名字，所以现在你把这种现象称为 data.name ，而不是仅仅名称。

\r

\r

（函数（）{\r
  使用严格的;\r
\r
  angular.module（'对myApp'，[]）\r
    .controller（'NewcontactCtrl'，函数（$范围，$窗口）{\r
\r
    $ scope.repeaterTest = [1];\r
      $ scope.data = {名称：'詹姆斯'};\r
      $ scope.toChat =功能（）{\r
        $ window.alert（$ scope.data.name）;\r
      };\r
    }）;\r
\r
}）（）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.28/angular.min.js\"></script>\r
\r
＆LT; D​​IV NG-应用=对myApp＆GT;\r
  ＆LT; D​​IV NG控制器=NewcontactCtrl＆GT;\r
    ＆LT;标签NG重复=试验repeaterTest＆GT;\r
      ＆LT;输入类型=文本占位符=名称NG模型=data.name/＆GT;\r
    ＆LT; /标签＆gt;\r
    ＆LT;按钮类=按钮NG点击=toChat（）＆GT;\r
      下一个\r
    ＆LT; /按钮＆GT;\r
  ＆LT; / DIV＆GT;\r
\r
＆LT; / DIV＆GT;

\r

\r

\r

I have got a form where user will enter a name and click Next. What I want to do is that, when the user clicks Next, I want to alert the updated value of $scope.name inside toChat function, but initial value is alerted, which is James. How can I access the updated value inside angular function? I have some serious problems understanding sharing variables within 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>

Can anyone help ?

解决方案

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

The most relevant part in the above:

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">.

I believe you have a directive in there somewhere (probably ion-content) that is creating a new scope where your input field is, separated from the scope where your Next button is.

To simulate this, I've used ng-repeat in the below snippet (but I'm repeating only once), which causes the same behaviour of splitting the scopes. If you were to use your controller code unmodified with this html, you'd reproduce the issue you're experiencing.

The solution around this is to 'use a dot (.)' when binding. Notice that I've wrapped the name within an object called 'data' on the scope, so now you refer to this as data.name instead of just 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>

这篇关于角数据绑定不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！