Question

我在内部使用ng-repeat指令。我已经在更改数组项的顺序内部切换功能。当我显示范围模型时，我看到项目更改了订单但UI未更新。尝试范围。$ apply（）但它说进程忙。

.directive('example', function() {
    return {
        restrict: 'E',
        transclude: true,
        template: `
                Checking model: {{model}}

                <div ng-repeat="(key, row) in model">
                        <div ng-hide="key == 0">
                            <div class="icon-arrow-u" ng-hide="$first" ng-click="moveUp(key)"></div>
                            <div class="icon-delete" ng-click="removeCell(key)"></div>
                            <div class="icon-arrow-d" ng-hide="$last" ng-click="moveDown(key)"></div>
                        </div>
                    </div>
                </div>
        `,
        scope: {
            model: '='
        },
        link: function(scope, element) {
            scope.moveItem = function (origin, destination) {
                var temp = scope.model[destination];
                scope.model[destination] = scope.model[origin];
                scope.model[origin] = temp;
            };

            scope.moveUp = function(index) {
                scope.moveItem(index, index - 1);
            }

            scope.moveDown = function(index) {
                scope.moveItem(index, index + 1);
            }
        }
    }
})

Answer 1

没有看到代码小提琴，我猜它的原因在于ng-repeat指令。您应该添加track by表达式（请参阅AngularJS doc）

例如，您可以撰写(key, row) in model track by key或(key, row) in model track by row。无论哪种方式，它必须是每行唯一的值。

Answer 2

使用directives时，范围被隔离。您需要应用范围才能查看更改。

在链接中的每个函数或者调用事件时添加以下代码。

内部链接功能使用：

        if (scope.$root.$$phase != '$apply' &&
            scope.$root.$$phase != '$digest') {
            scope.$apply();

        }

来自主控制器

        if ($scope.$root.$$phase != '$apply' &&
            $scope.$root.$$phase != '$digest') {
            $scope.$apply();

        }

如果不起作用，请尝试在每个事件上调用此方法。

function apply(scope) {
  if (!scope.$$phase && !scope.$root.$$phase) {
    scope.$apply();
    console.log("Scope Apply Done !!");
  } 
  else {
    console.log("Scheduling Apply after 200ms digest cycle already in progress");
    setTimeout(function() {
        apply(scope)
    }, 200);
  }
}

希望这有帮助。

AngularJs指令视图不在ng-repeat上更新

2 个答案: