AngularJS暂时禁止某些视图更新

Question

I have a complex view where the user interacts with with many different objects through modals. Whichever data set corresponds to the active modal is set as $scope.object. This works great for what I need. The only downfall is that, in the background, beneath the current modal, the visible data disappears, because the $scope.object has changed. So for purely aesthetic reasons, I'm trying to figure out a way to temporarily disable AngularJS from updating certain parts of the view. I could only think of something hacky like this:

$('#my-element [ng-model]').attr('ng-model', 'xx-model');
$('#my-element [ng-repeat]').attr('ng-repeat', 'xx-repeat');

And then reversing the operation when necessary. But this doesn't work. Any ideas?

Answer 1

Perhaps you should use different controllers, one for the modal and another one for other purposes, and a service to do what you want.

Then use your own service with dependency injection inside the respective controller.

Answer 2

I appreciate the help. Here's what I ended up doing: I duplicate the elements that become empty when my $scope.object changes. To the user, it looks as if nothing changes:

$('[ng-repeat]').each(function() {
    parent = $(this).parent();
    $(parent).addClass('placeholder');
    placeholder = $(parent)[0].outerHTML;
    $(parent).removeClass('placeholder');
    $(parent).after(placeholder);
});

When my current object ($scope.object) is set back to the original data, I run similar logic that removes the placeholder elements. Hope this helps someone.