Keep state of element / area when moving controller in DOM

Question

In an angular application, I want to move an element from one part of the DOM tree to another without reloading the / s controller attached to the moved element.

I created a simplified plunker to illustrate: http://plnkr.co/edit/sqBRM3ZQ5G9xpiNd1MXm?p=preview

In this plunker, the only data that needs to be saved is the state of the toggler, but in fact it can be a very large amount of data, which can take a lot of effort to initialize.

What I want to do is move pattern 1 from directive 1 to directive 2, but I want to keep the state of the switch. In this case, if you press the toggler switch to make it green, and double-click "move from list 1 to 2", it will move it to directive 2, but reset the color to red.

To get around this, I can simply move the element without angular notification, but this obviously creates a broken state for the application.

I thought about just moving the controller from the old area to the new area, but I feel this will cause closure problems, as the old controller may refer to an old element that is no longer in the DOM, etc.

Is there a good way to solve this problem?

Adding some code because StackOverflow requires it, but refer to plunker instead:

angular.module('app').controller('bodyController', ['$element', function ($element) { this.contents1 = [{ path: 'template1.html' }, { path: 'template2.html' }]; this.contents2 = [{ path: 'template3.html' }, { path: 'template4.html' }]; this.move12 = function () { this.contents2.push(this.contents1.pop()); }; this.move21 = function () { this.contents1.push(this.contents2.pop()); }; this.naiveMove12 = function () { var $elem = $($element); $elem.find('container-list:eq(0) > div').last() .appendTo($elem.find('container-list').eq(1)); }; this.naiveMove21 = function () { var $elem = $($element); $elem.find('container-list:eq(1) > div').last() .appendTo($elem.find('container-list').eq(0)); }; this.logScope = function () { var $elem = $($element); [].forEach.call($elem.find('container-list'), function (elem, idx) { console.log(idx + ': ', angular.element(elem).isolateScope().containerListCtrl); }); }; }]); 

Answer 1

The state of the application connecting to the view / controller is not the best practice in my experience, but here is a way to do it: the revised plunkr .

template1.html has a few minor changes. The only changes to templateController.js :

 angular.module('app').controller('templateController', statefulTemplateCtrl()); function statefulTemplateCtrl() { var state = {color: 'red'}; return function(){ this.state = state; // this.color = 'red'; this.toggleColor = function () { state.color = (state.color === 'red') ? 'green' : 'red'; }; }; } 

where the templateController function is now used to support the reference to the state object. Now, if you move the template using bodyCtrl.move12() , you can save the accumulated switching state without breaking the state of your application. This works because the controller has a reference to an external object through closure. As a result, it can be re-created and recompiled in the new DOM node to ng-include without re-setting state .

Probably the best way to deal with

Use the services and / or $scope event APIs to share states between different DOM nodes in your application.

Say that you have a template that is the same as that entered in your plunker:

 <div ng-class="{ red: (tc.color === 'red'), green: (tc.color === 'green') }" ng-click="tc.toggleColor()">Toggler</div> 

And you want to move the tc object, which contains all of your switching state, to another node in the DOM, you can:

• send the event down the hierarchy with $scope.$broadcast('nameOfEvent', tc) if the destination node is a descendant of the source $scope
• send an event up the $scope.$emit('nameOfEvent', tc) hierarchy if $scope.$emit('nameOfEvent', tc) if the target node is the ancestor of the source $scope
• send an event to all the nodes of your application by entering $rootScope and $rootScope.$broadcast('nameOfEvent', tc) if the destination node can also be.

Calling any of these methods on the $ scope event API will allow you to pass data, in this case a tc object, from one node to another. The destination controller associated with the node destination can expect the event to be dispatched using a listener function that can receive the transmitted data:

 function bindDataToController(destinationCtrl){ return function(event, tc){ angular.extend(destinationCtrl, tc); }; } $scope.$on('nameOfEvent', bindDataToController(this)); 

The transferred tc data object will be bound to the controller associated with the new destination node, after receiving the initiated 'nameOfEvent' . Now that the source data has been merged with the destination controller object, make sure that your destination controller is given the same name as controllerAs your source controller, in this case 'tc' , so that the source template can correctly refer to the destination controller when it is ultimately compiled and attached to the destination DOM node (this process is discussed below).

Removing and adding DOM nodes is somewhat trivial, as you mentioned, so I haven't discussed it here, but if you need easy access to the original view / template to add and remove anywhere in your application as needed, you can use $templateCache .

Returning to the switching example, if your viewgame / template itself is already part of the directive that uses templateUrl with the path file 'toggle.html' , then your template has already been placed into memory and saved in $templateCache under the key 'toggle.html' .

In the destination controller, enter $templateCache , which will allow you to get the template:

  var template = $templateCache.get('toggle.html'); 

Entering $ is compiled into your destination controller and compiles the template with the target destination area (also entered into the destination controller):

 var $template = $compile(template)($scope); 

then add the compiled template to $element (also added to the destination controller) associated with your destination controller:

 $element.append($template); 

If you only want to compile and add the 'toggle.html' template to the DOM after receiving the transferred data, you can put the above imperative compilation code into the bindDataToController return function registered as an event listener for 'nameOfEvent' . And there you have it! ... a DOM node that has been "moved" with any complex state that was previously created in the original location.