Preventing a view update from model change in AngularJS

Question

Preventing a view update from model change in AngularJS

I have a directive widget, of which many are dynamically added to the page into one of three vertical columns. Within the directive, I keep track of which column the widget is in via a parent property. The HTML I use to render this is as below:

<div id="columns">
    <div id="column1">
        <widget data-ng-repeat="widget in widgets | filter:{parent: 'column1'}" data-widget="widget" />
    </div>
    <div id="column2">
        <widget data-ng-repeat="widget in widgets | filter:{parent: 'column2'}" data-widget="widget" />
    </div>
    <div id="column3">
        <widget data-ng-repeat="widget in widgets | filter:{parent: 'column3'}" data-widget="widget" />
    </div>
</div>

Each widget is of a specified type, so they each have different content and are independant of each other. The user can drag and drop these between the different columns, and Angular automatically updates the parent for me in the underlying data. My problem is that by Angular doing this model update, it also triggers a reload of the directive, so it effectively re-initializes the widget, thus wiping out any changes the user has made in it.

Is there any way for me to allow Angular to update the underlying model data, but stop it from re-rendering that change to the view? I realise this is what Angular is supposed to do, but in this one situation its undesirable, and enough for me to consider removing Angular.

I can try to put together a JSFiddle illustrating the problem I have if that would be of use.

angularjs

Answer 1

We're probably going to need to see that widget directive.

But without looking at it, if reprocessing the view is wiping out updates made to the widget, then the widget isn't very "Angular".

What I mean by that, is you're not supposed to be persisting user input in the DOM, you should be persisting user input to your scope via directives like ngModel or even custom directives. If you don't want to publish changes from your directive into it's parent model, you're going to have to persist it into it's own isolated scope, then push changes out when need-be.

Answer 2

I managed to solve this myself eventually. Whilst trying to knock up a demo of the issue to post on here, I realised that was going to be impossible because of the structure of my code. So, i've embarked on a process of refactoring and ensuring everything is 'the Angular way'. This has greatly improved the structure of my code and it feels much better. It has also inadvertently resolved my issue without me actually knowing what has fixed it!