From 575592963731e1c1ddabdfebe9f4289d68684c14 Mon Sep 17 00:00:00 2001
From: Mo Bitar <me@bitar.io>
Date: Tue, 23 Jan 2018 11:00:54 -0600
Subject: [PATCH] Proper component modal dealloc

---
 .../app/directives/views/componentModal.js       | 11 ++++-------
 .../app/directives/views/componentView.js        | 16 +++++++++-------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/app/directives/views/componentModal.js b/app/assets/javascripts/app/directives/views/componentModal.js
index 9d73df8ad..0ee48c915 100644
--- a/app/assets/javascripts/app/directives/views/componentModal.js
+++ b/app/assets/javascripts/app/directives/views/componentModal.js
@@ -26,13 +26,10 @@ class ComponentModal {
 
     $scope.dismiss = function(callback) {
       var onDismiss = $scope.component.directiveController && $scope.component.directiveController.onDismiss();
-      // Setting will null out compinent-view's component, which will handle deactivation
-      $scope.component = null;
-      $timeout(() => {
-        $scope.el.remove();
-        onDismiss && onDismiss();
-        callback && callback();
-      })
+      $scope.el.remove();
+      $scope.$destroy();
+      onDismiss && onDismiss();
+      callback && callback();
     }
 
   }
diff --git a/app/assets/javascripts/app/directives/views/componentView.js b/app/assets/javascripts/app/directives/views/componentView.js
index 28765d59d..73f390983 100644
--- a/app/assets/javascripts/app/directives/views/componentView.js
+++ b/app/assets/javascripts/app/directives/views/componentView.js
@@ -15,25 +15,27 @@ class ComponentView {
   link($scope, el, attrs, ctrl) {
     $scope.el = el;
 
-    let identifier = "component-view-" + Math.random();
+    $scope.identifier = "component-view-" + Math.random();
 
-    this.componentManager.registerHandler({identifier: identifier, areas: ["*"], activationHandler: (component) => {
+    console.log("Registering handler", $scope.identifier, $scope.component.name);
+
+    this.componentManager.registerHandler({identifier: $scope.identifier, areas: [$scope.component.area], activationHandler: (component) => {
       if(component.active) {
-        this.timeout(function(){
+        this.timeout(() => {
           var iframe = this.componentManager.iframeForComponent(component);
           if(iframe) {
             iframe.onload = function() {
               this.componentManager.registerComponentWindow(component, iframe.contentWindow);
             }.bind(this);
           }
-        }.bind(this));
+        });
       }
     },
-    actionHandler: function(component, action, data) {
+    actionHandler: (component, action, data) => {
        if(action == "set-size") {
          this.componentManager.handleSetSizeEvent(component, data);
        }
-    }.bind(this)});
+    }});
 
     $scope.$watch('component', function(component, prevComponent){
       ctrl.componentValueChanging(component, prevComponent);
@@ -72,7 +74,6 @@ class ComponentView {
         }
       }
 
-
       $timeout(() => {
         $scope.reloading = false;
       }, 500)
@@ -85,6 +86,7 @@ class ComponentView {
     }
 
     $scope.$on("$destroy", function() {
+      console.log("Deregistering handler", $scope.identifier, $scope.component.name);
       componentManager.deregisterHandler($scope.identifier);
       if($scope.component && !$scope.manualDealloc) {
         componentManager.deactivateComponent($scope.component);