2

私は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}}

入力すると挨拶が更新されます。2番目の構文は機能するが、最初の構文は機能しない理由について混乱しています。

4

3 に答える 3

4

$scope.person=$scope.fnameperson$scope オブジェクトにプリミティブ プロパティを作成し、それに値を割り当てますundefined(このコード行が実行された時点では $scope.fname がまだ存在していないため)。これは、テキスト ボックスに入力する前の $scope の外観です。

入力する前に $scope

テキスト ボックスに何かを入力すると、Angularfnameは $scope にプリミティブ プロパティを自動的に作成し、自動双方向データ バインディングによって値がテキスト ボックスにあるものに継続的に設定されます。したがって、「Mark」と入力すると、$scope は次のようになります。

入力後の $scope

{{person}}何も表示されず、テキストボックスの内容が表示される理由は明らか{{fname}}です。

于 2013-01-07T22:38:22.937 に答える
2

アスゴスの答えに、このコードは誤解を招くことも付け加えます。

$scope.person=$scope.fname;

このコードは、ビューで何かが発生するたびに実行されるのではなく、コントローラーが実行されたときに 1 回だけ実行されます。$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()">
于 2013-01-07T11:59:19.050 に答える
2

なぜなら、入力フィールドに入力しているときに$scope.fname、 ではなく が変化するから$scope.personです。

$watchon で修正できますfname：

$scope.$watch('fname', function(value) {
   if(value) {
      $scope.person = value;
   }
}, true);
于 2013-01-07T07:19:21.460 に答える