Question

我正在试图了解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}}

当我输入时，问候语会更新。我很困惑为什么第二种语法有效而不是第一种语法。

Answer 1

$scope.person=$scope.fname在$ scope对象上创建一个person原语属性，并为其赋值undefined（因为执行此代码行时$ scope.fname尚不存在）。在您输入文本框之前，这就是您的$ scope的样子：

$scope before typing

在文本框中键入内容后，Angular会自动在$ scope上创建fname基元属性，并且自动双向数据绑定会不断地将值设置为文本框中的任何内容。所以，如果我输入“Mark”，那么$ scope现在看起来像这样：

$scope after typing

现在应该清楚为什么{{person}}什么都没有显示，但{{fname}}显示了文本框中的内容。

Answer 2

对于asgoth的回答，我还要补充一点，这段代码掩盖了一个误解：

$scope.person=$scope.fname;

每次在视图中发生某些事情时，此代码不运行，但在执行控制器时只执行一次。您似乎试图将$scope.person设置为$scope.fname中的值。但$scope.fname未定义 - 这是您的控制器需要做的事情。因此，您的视图和控制器都引用了未定义的值。

在这种简单的情况下，你的控制器应该在模型启动时初始化它：

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

然后将元素绑定到person的属性（例如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()">

AngularJS初学者数据绑定混乱

2 个答案: