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

Question

I have directive with ng-repeat inside. And I have toggle function inside that changing order of array items. When I'm displaying scope model I see that items changing their order but UI not updating. Tried scope.$apply() but it says that process busy.

.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

Without seeing a code fiddle, I'd guess that the reason lies within the ng-repeat directive. You should add a track by expression (see AngularJS doc )

For example you could write (key, row) in model track by key or (key, row) in model track by row . Either way it has to be a value that's unique to every row.

Answer 2

Scope is isolated when a directives is used. You need to apply the scope to see the changes.

Add the following code on each function in the link or whenever the event is called.

Inside link function use :

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

        }

From main controller

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

        }

if that doesn't work, try calling this on each event.

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

Hope this helps.