9

当我尝试在ng-click上更新我的数组以更新我的 ng-repeat 指令项时：

<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];
        });
}

单击第一级菜单项后，它应该显示具有对应元素的第二级菜单块（通过使用对应值更新数组，见下文）。这是我需要在点击时更新的二级菜单块：

<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 指令没有更新我的二级菜单（基于更新数组）。我尝试使用（和不使用） $apply 函数 - 结果相同（尽管使用 $apply 错误消息出现Error: $apply already in progress）。

那么，为什么我的数组在单击时成功更新，而 ng-repeat 指令菜单元素没有显示呢？

我已阅读相关帖子（链接、链接、链接），但没有找到任何可行的决定。

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 回答
0

您是否尝试过将 selectL2Menu 函数更改为：

$scope.selectL2menu = function (itemL1name){
    $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj[itemL1name];
}
于 2013-05-28T17:37:53.310 回答