Move event-listener functions out of init()

h/static/scripts/directive/annotation.js

@@ -215,26 +215,45 @@ function AnnotationController(
       */
     newlyCreatedByHighlightButton = model.$highlight || false;
 
-    $scope.$on('$destroy', function() {
-      updateTimestamp = angular.noop;
-    });
+    // Call `onDestroy()` when this AnnotationController's scope is removed.
+    $scope.$on('$destroy', onDestroy);
 
-    // Watch for changes to the domain model and recreate the view model when it
-    // changes.
-    $scope.$watch((function() {return model;}), function(model, old) {
-      if (model.updated !== old.updated) {
-        // Discard saved drafts.
-        drafts.remove(model);
+    // Call `onModelChange()` whenever `model` changes.
+    $scope.$watch((function() {return model;}), onModelChange, true);
+
+    // Call `onGroupFocused()` whenever the currently-focused group changes.
+    $scope.$on(events.GROUP_FOCUSED, onGroupFocused);
+
+    // New annotations (just created locally by the client, rather then
+    // received from the server) have some fields missing. Add them.
+    model.user = model.user || session.state.userid;
+    model.group = model.group || groups.focused().id;
+    model.permissions = model.permissions || permissions['default'](model.group);
+
+    // Automatically save new highlights to the server when they're created.
+    // Note that this line also gets called when the user logs in (since
+    // AnnotationController instances are re-created on login) so serves to
+    // automatically save highlights that were created while logged out when you
+    // log in.
+    saveNewHighlight();
+
+    // If this annotation is not a highlight and if it's new (has just been
+    // created by the annotate button) or it has edits not yet saved to the
+    // server - then open the editor on AnnotationController instantiation.
+    if (!newlyCreatedByHighlightButton) {
+      if (!model.id || drafts.get(model)) {
+        vm.edit();
+      }
+    }
   }
 
-      updateTimestamp(model === old);  // Repeat on first run.
-      vm.render();
-    }, true);
+  /** Called when this AnnotationController instance's scope is removed. */
+  function onDestroy() {
+    updateTimestamp = angular.noop;
+  }
 
-    // When the current group changes, persist any unsaved changes using
-    // the drafts service. They will be restored when this annotation is
-    // next loaded.
-    $scope.$on(events.GROUP_FOCUSED, function() {
+  /** Called whenever the currently-focused group changes. */
+  function onGroupFocused() {
     if (!vm.editing()) {
       return;
     }
@@ -253,36 +272,22 @@ function AnnotationController(
       vm.annotation.group = model.group;
     }
 
-      // if we have a draft, update it, otherwise (eg. when the user signs out)
-      // do not create a new one.
     if (drafts.get(model)) {
       var draftDomainModel = {};
       updateDomainModel(draftDomainModel, vm.annotation);
       updateDraft(draftDomainModel);
     }
-    });
-
-    // New annotations (just created locally by the client, rather then
-    // received from the server) have some fields missing. Add them.
-    model.user = model.user || session.state.userid;
-    model.group = model.group || groups.focused().id;
-    model.permissions = model.permissions || permissions['default'](model.group);
-
-    // Automatically save new highlights to the server when they're created.
-    // Note that this line also gets called when the user logs in (since
-    // AnnotationController instances are re-created on login) so serves to
-    // automatically save highlights that were created while logged out when you
-    // log in.
-    saveNewHighlight();
-
-    // If this annotation is not a highlight and if it's new (has just been
-    // created by the annotate button) or it has edits not yet saved to the
-    // server - then open the editor on AnnotationController instantiation.
-    if (!newlyCreatedByHighlightButton) {
-      if (!model.id || drafts.get(model)) {
-        vm.edit();
   }
+
+  /** Called whenever `model` changes. */
+  function onModelChange(model, old) {
+    if (model.updated !== old.updated) {
+      // Discard saved drafts.
+      drafts.remove(model);
     }
+
+    updateTimestamp(model === old);  // Repeat on first run.
+    vm.render();
   }
 
   /**