修改范围变量后范围绑定未更新

Question

在提交 $Modal (modalInstance) 时，我正在更新作用域 ($scope.expenses) 上的数组，视图绑定到对象，datatable 使用 "expenses"作为数据。我可以看到 $scope.expenses 正在调试更新并且正在插入一个新项目但是在 table 和 {{expenses.length}} 绑定中我看不到更新。我已经阅读了很多关于这个问题的问题，插入正在 angular 端执行，所以如果我理解 apply\digest 是不需要的。

我试过了：

在推送后调用 $scope.$digest\$scope.$apply() （导致摘要已经在进行中的错误）
将推送包装在 $scope.$apply(function) 中的函数中。同样的错误，摘要已经在进行中
使用 $timeout 以便将推送推迟到下一个摘要周期 - 视图不会更新

None 以上选项解决了问题。

视图（我确实看到了推送前的长度，因此在视图中正确定义了绑定，这就是我不粘贴整个视图的原因）：

<div class="row">
    <div class="ibox-content col-lg-10 col-lg-offset-1" ng-controller="LiveCtrl">
        {{expenses.length}}


        <div class="col-md-1" ng-controller="LiveCtrl">
            <button class="btn btn-link" ng-click="openAddExpenseModal()">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Expense
            </button>
        </div>
    </div>
</div>

我将新项目推送到支出的控制器代码：

  modalInstance.result.then(function (newExpense) {
  ExpenseService.addExpense(newExpense).then(function (id) {
            console.log(id);
            $scope.expenses.push(newExpense);
        }, function (rejectData) {
            console.log(rejectData);
        });
    }, function (msg) {
        console.log('Modal dismissed at: ' + new Date() + 'Message - ' + msg);
    });

Answer 1

问题是您使用了控制器两次，实际上创建了两个作用域，因此创建了两个数组：

曾经在这里：<div class="ibox-content col-lg-10 col-lg-offset-1" ng-controller="LiveCtrl">

第二次在这里：<div class="col-md-1" ng-controller="LiveCtrl">

所以上一个显示的是原始费用数组的长度，但实际上是将费用添加到第二个控制器范围的数组中。原来的，在父范围内保持不变。

您需要做的是删除控制器的最后声明，创建：

<div class="row">
    <div class="ibox-content col-lg-10 col-lg-offset-1" ng-controller="LiveCtrl">
        {{expenses.length}}


        <div class="col-md-1">
            <button class="btn btn-link" ng-click="openAddExpenseModal()">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Expense
            </button>
        </div>
    </div>
</div>

修改范围变量后范围绑定未更新

Scope binding is not getting updated after scope variable was modified

javascript

angularjs

angularjs-scope