34

ng-clickに添付されたを使用してモデルを更新しようとしてい<p>ます。

の外側で代入式を使用したり、 の中でng-repeatスコープ メソッドを呼び出したりしても問題ありません。ただし、内で代入を使用すると、無視されるように見えます。Firefox コンソールに報告されたメッセージは表示されませんが、ブレークポイントを設定してイベントが発生しているかどうかを確認していません。ng-repeatng-repeat

<!DOCTYPE html>
<html>
<head>
    <title>Test of ng-click</title>
    <script type='text/javascript' src='http://code.angularjs.org/1.1.1/angular.js'></script>
    <script type='text/javascript'>//<![CDATA[ 

        function MyCtrl($scope) {
            $scope.selected = "";
            $scope.defaultValue = "test";
            $scope.values = ["foo", "bar", "baz"];

            $scope.doSelect = function(val) {
                $scope.selected = val;
            }
        }
        //]]>  

    </script>
</head>

<body ng-app>
    <div ng-controller='MyCtrl'>
        <p>Selected = {{selected}}</p>
        <hr/>
        <p ng-click='selected = defaultValue'>Click me</p>
        <hr/>
        <p ng-repeat='value in values' ng-click='selected = value'>{{value}}</p>
        <hr/>
        <p ng-repeat='value in values' ng-click='doSelect(value)'>{{value}}</p>
    </div>
</body>
</html>

必要に応じて、フィドルはこちらにあります（以前のいくつかのバリアントとともに）。

4

2 に答える 2

79

ディレクティブngRepeatは、反復ごとに新しいスコープを作成するため、親スコープで変数を参照する必要があります。

次のように、を使用$parent.selected = valueします。

<p ng-repeat='value in values' ng-click='$parent.selected = value'>{{value}}</p>

注：関数呼び出しは、プロトタイプの継承のために伝播します。

詳細を知りたい場合：スコーププロトタイプ継承のニュアンス。

于 2013-03-13T14:45:58.977 に答える
21

@Stewie が述べたように、 $parent はこの問題を解決する 1 つの方法です。ただし、推奨される ( Angular チームによる) 解決策は、$scope でプリミティブ プロパティを定義しないことです。むしろ、$scope はモデルを参照する必要があります。参照を使用すると、この問題も回避されます (プリミティブ プロパティは、同じ名前の親スコープ プロパティを非表示/シャドウする子スコープで作成されないため)、いつ $parent を使用するかを覚えておく必要はありません。

HTML:

<p>Selected = {{model.selected}}</p>
<hr/>
<p ng-click='model.selected = defaultValue'>Click me</p>
<hr/>
<p ng-repeat='value in values' ng-click='model.selected = value'>{{value}}</p>
<hr/>
<p ng-repeat='value in values' ng-click='doSelect(value)'>{{value}}</p>

JavaScript:

$scope.model = { selected: ""};
...
$scope.doSelect = function (val) {
   $scope.model.selected = val;
}

フィドル。

最近、@Stewie が言及した wiki ページを更新して、常にこのアプローチを推奨しています。

于 2013-03-13T19:05:47.317 に答える