Question

我是AngularJS的新手，无法理解在这段代码中：视图：

  <div ng-controller="ordersCtrl">
            <div id="messagesIndic" onclick="messageClick()" class="btn btn-info">
                Messages <span class="badge badge-primary" ng-bind="orders.length"></span>

            </div>
        </div>

...


<div ng-controller="ordersCtrl">

            <div ng-repeat="order in orders track by $index" class="order-page">
                <div class="orders-list-content">
                    <div style="margin:2px">Cource name: {{order.Title}}</div>
                    <div style="margin:2px">Description: {{order.Description}}</div>
                    <div style="margin:2px">Teacher name: {{order.TeacherName}}</div>
                </div>
                <div class="orders-list-buttons" style="text-align:center">
                    <div class="order-button btn btn-success" ng-click="successOrder(order.Id)">Success</div>
                    <div class="order-button btn btn-danger" ng-click="rejectOrder(order.Id )">Reject</div>
                </div>
            </div>
        </div>

和JS代码：

    app.controller('ordersCtrl', function ($scope, $http) {
        $scope.ordersLen = 0;
        $http({
            method: "GET",
            url: "/Course/OrdersToCource"
        }).then(function (result) {
            $scope.orders = result.data
        })

        $scope.successOrder = function (id, item, eventCaller) {
            $http({
                method: "POST",
                url: "/Cource/SuccessToOrder?orderId=" + id
            }).then(function (result) {
                var index = $scope.orders.indexOf(item);
                console.log(item);
                $scope.orders.splice(index, 1);
                $scope.ordersLen = $scope.orders.length
            })
        }

        $scope.rejectOrder = function (id, item, eventCaller) {
            $http({
                method: "POST",
                url: "/Course/RejectOrderToCourse?orderId=" + id
            }).then(function (result) {
                var index = $scope.orders.indexOf(item);
                $scope.orders.splice(index, 1);
            })
        }
    })

当我是init rejectOrder 或 successOrder 函数时，它会成功运行，并且在从服务器响应后，它会从“orders”数组中删除元素并绑定到 ng-repeat 模型动态隐藏已移除的元素但 ng-bind =“orders.length” 不会更改。有人知道是什么原因吗？

Answer 1

ng-bind不能使用数组，因为您正在更改摘要周期之外的数组值。使用$scope.apply()或者您可以尝试在{{orders.length}}标记中使用双重标记span，这应该可以解决问题。

<div id="messagesIndic" onclick="messageClick()" class="btn btn-info">
                Messages <span class="badge badge-primary">{{orders.length}}</span>

            </div>

Answer 2

最后我找到了原因，我有两个同名的控制器但是 - 尽管彼此都有他自己的$ scope

更改后，Ng-bind不会更新值

2 个答案: