9

ng-repeat のディレクティブ項目を更新するために、ng-clickで配列を更新しようとすると:

<li ng-repeat="itemL1 in mainMenuL1Arr"
    ng-click="selectL2menu(itemL1.name)">
  <i ng-class="getClass(itemL1.icon)"></i>
</li>

selectL2menu()はコントローラーで次のように定義されています。

$scope.selectL2menu = function selectL2menu(itemL1name){
        $scope.$apply(function () {
            $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj[itemL1name];
        });
}

第 1 レベルのメニュー項目をクリックした直後に、対応する要素を含む第 2 レベルのメニュー ブロックが表示されます (対応する値で配列を更新することにより、以下を参照)。これは、クリック時に更新する必要がある第 2 レベルのメニュー ブロックです。

<li ng-repeat="itemL2 in mainMenuL2CurArr"
    class="subMenuElemBlock"
    ng-class="{active: itemL2.selected}">
        <a href="#">
             <i ng-class="getClass(itemL2.icon)"></i>
             <span>{{itemL2.name}}</span>
        </a>
</li>

クリックイベントがトリガーされている間-アレイが正常に更新されました。それにもかかわらず、ng-repeat ディレクティブは私の第 2 レベルのメニューを更新しませんでした (配列の更新に基づいています)。私は $apply 関数を使用して (および使用せずに) 試しました - 同じ結果です (ただし、 $apply エラーメッセージが表示されますError: $apply already in progress )。

では、ng-repeat ディレクティブ メニュー要素で表示されないクリックで配列が正常に更新されるのはなぜですか?

関連する投稿 ( link、link、link ) を読みましたが、有効な決定が見つかりませんでした。

4

3 に答える 3

5

コントローラー コードを詳しく調べないと、問題の原因を特定することは困難です。これは、単純化された作業フィドルです。お持ちのものと比べてみることをお勧めします。

ディレクティブが自動的に呼び出す$scope.$apply()ため、呼び出す必要がないことに注意してください。ng-click

HTML:

<ul>
    <li ng-repeat="itemL1 in mainMenuL1Arr" ng-click="selectL2menu(itemL1.name)">
      {{itemL1.name}}</li>
</ul>
<ul style="margin-left: 20px">
    <li ng-repeat="itemL2 in mainMenuL2CurArr"><a href="#">
         <span>{{itemL2.name}}</span>
    </a>
    </li>
</ul>

JavaScript:

function MyCtrl($scope) {
    $scope.mainMenuL1Arr = [ {name: 'one'}, {name: 'two'} ];
    $scope.mainMenuL2Obj = { 
        one: [ {name: '1.1'}, {name: '1.2'} ],
        two: [ {name: '2.1'}, {name: '2.2'} ] };
    $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj['one'];
    $scope.selectL2menu = function (itemL1name) {
        console.log(itemL1name);
        $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj[itemL1name];
    };
}
于 2013-05-28T17:45:11.777 に答える
3

次のように配列にアイテムを追加した後、 $scope.$apply() を作成してみてください

$scope.array.push({id: 1, name: 'test'});
$scope.$apply();

おそらく、スコープ適用をブロックするプラグインまたはこのような別の機能があります。私の場合、select2があり、フィールドで選択すると適用が開始されません

于 2014-09-18T13:13:22.743 に答える