AngularJS初学者数据绑定混乱

我在试图让我周围的数据绑定AngularJS的能力头部中间，有排序的新手问题：AngularJS初学者数据绑定混乱

在下面的例子，当我输入一个名称文本框中，问候不会更新。

<html ng-app> 
<head> 
    <script src="js/angular.js"></script> 
    <script> 
     function myCtl($scope){ 
      $scope.person=$scope.fname; 
     } 
    </script> 
</head> 
<body> 
     <div ng-controller="myCtl"> 
      <input ng-model="fname"/> 
      <br/>    
      Hello, {{person}} 
     </div> 
</body>

当我改变

Hello, {{person}}

到

Hello, {{fname}}

问候更新为I型。我很困惑为什么第二种语法可行，但不是第一种。

来源

2013-01-07 rchawdry

要asgoth的答案，我还想补充一点，这个代码掩盖了一个误区：

$scope.person=$scope.fname;

此代码是每个不运行

你可以用$watch上fname修复时间在视图中发生的事情，但只有一次当你的控制器执行。您似乎试图将$scope.person设置为$scope.fname中的值。但是$scope.fname没有定义 - 这就是你的控制器需要做的。因此你的视图和控制器都引用一个未定义的值。

在简单的情况下，像这样的控制器应该只是初始化模式启动时：

function myCtl($scope){ 
    scope.person = { 
     fname: '', 
     lname: '', 
     email: '' 
    }; 
}

然后您绑定的元素（例如ng-model="person.fname"）的人的特性。

现在，无论何时代码在您的控制器中运行，它都会自动具有正确的person.fname角度为您提供帮助 - 您永远不需要“从您的视图中读取”。

function myCtl($scope){ 
    $scope.person = { 
     fname: '', 
     lname: '', 
     email: '' 
    }; 
    function validate() { 
     if (!$scope.email.match(/@/) return window.alert('Please enter a valid email address!'); 
    } 
}

从你的观点，你会那么做：

<form ng-submit="validate()">

或

<button ng-click="validate()">

来源

2013-01-07 11:59:19 Marc

因为当您在输入字段中输入时，$scope.fname正在更改，而不是$scope.person。

$scope.$watch('fname', function(value) { 
    if(value) { 
     $scope.person = value; 
    } 
}, true);

来源

2013-01-07 07:19:21 asgoth

$scope.person=$scope.fname创建$范围对象的person基本属性，并为其指定值undefined（因为$当这行代码执行时，scope.fname不存在）。这是你的$范围是什么样子，你键入的文字框：

$scope before typing

后，你输入一些东西到文本框中，角自动创建在$范围fname基本属性，并自动双向数据绑定不断将值设置为文本框中的任何值。所以，如果我键入“标记”，然后$范围现在看起来是这样的：

$scope after typing

应该清楚了吧，为什么{{person}}说明不了什么，但{{fname}}显示的是在文本框中。

来源

2013-01-07 22:38:22

AngularJS初学者数据绑定混乱

回答

相关问题