3

次のコードを取得しました。

<div class="map" ng-controller="DealerMarkerListCtrl">
    <a ng-click="showdetails=!showdetails" href="#/dealer/{{marker.id}}" class="marker" style="left:{{marker.left}}px;top:{{marker.top}}px" ng-repeat="marker in dealer"></a>
</div>

そしてこのビュー:

<div ng-show="showdetails" class="alldealermodal">    
    <div ng-view></div>
</div>

これと同じ「ng-show」は、ng-repeat の外にある 1 つのリンクだけで適切に機能していますが、この ng-repeat では機能していません。
リンクはオーバーレイを開きます。ng-view も機能します。

私は何が欠けていますか?

4

2 に答える 2

5

ngRepeatは新しいスコープを作成するため、showdetails外部で参照されているものは、繰り返しで更新されているものng-repeatと同じインスタンスではありません。showdetailsng-click

詳細についてはこの投稿を参照してください。ただし、新しいスコープを回避する 1 つの方法は、プリミティブ型ではなくオブジェクト プロパティにバインドすることです。

このフィドルは、 withdetails.showではなくへのバインディングの小さな例を示しています。showdetails

$scope.details = { show: true };

于 2013-01-06T22:43:01.263 に答える
2

「何が足りないの?」

@Gloopy が既に述べたように、おそらく ng-repeat が子スコープ (項目ごとに 1 つ) を作成することに気付いていないでしょう。さらに、各子スコープはプロトタイプとして同じ親スコープから継承し、JavaScript がスコープでプロパティを検索 (または作成) する方法に影響するため、JavaScript プロトタイプ継承のしくみについて理解することも必要です。

多くの Angular 組み込みディレクティブが子スコープを作成することに注意してください: ng-repeat、ng-include、ng-switch、ng-controller、ディレクティブ (できますが、できない場合があります)。プロトタイプの継承がどのように機能するか、プリミティブにバインドしようとすると問題になる理由、および Angular スコープとの関係についての (多くの) 詳細については、こちらを参照してください。

@Gloopy の回答を拡張するには、他に 2 つの代替案を検討できます。

  1. ng-repeat 内で使用$parentして、(子スコープ プロパティを作成する代わりに) 親スコープ プロパティにバインドします。
    <a ng-click="$parent.showdetails=!$parent.showdetails" ...
  2. 親スコープでメソッドを定義して呼び出すことで、(子スコープのプロパティではなく) 親スコープのプロパティも変更します。
    <a ng-click="toggleDetails()" ...
于 2013-01-08T04:41:11.167 に答える