Minimize what data is stored in vm.annotation

Remove all the properties that don't need to be in vm.annotation from
vm.annotation.

This means removing all the read-only properties (id, target, updated, user)
and leaving only the read-write ones that the templates write via `ng-model`
(vm.annotation.tags and vm.annotation.text).

The templates still do need read-only access to id, target, updated and user,
but rather than _duplicating_ these values by copying them from domainModel
to vm.annotation, instead add accessor methods vm.id() etc that just return
the values from domainModel.

This has two advantages:

1. Data is not duplicated between domainModel and vm.annotation.
2. It's clear that these fields are read-only, since the templates literally
   can't write them, at least in the case of id, user and updated

   target is unfortunately a mutable object so the templates could still
   mutate it. vm.target() could return a copy to avoid this but I haven't gone
   that far.

h/static/scripts/directive/annotation.js

@@ -165,12 +165,6 @@ function updateViewModel(domainModel, vm, permissions) {
   vm.annotation = {
     text: domainModel.text,
     tags: viewModelTagsFromDomainModelTags(domainModel.tags),
-    // FIXME: These and other vm.annotation.* variables that the templates are
-    // using need to move out of vm.annotation and onto vm.
-    id: domainModel.id,
-    target: domainModel.target,
-    updated: domainModel.updated,
-    user: domainModel.user
   };
 
   vm.annotationURI = new URL(
@@ -536,13 +530,17 @@ function AnnotationController(
     * @returns {boolean} True if this annotation has quotes
     */
   vm.hasQuotes = function() {
-    return vm.annotation.target.some(function(target) {
+    return domainModel.target.some(function(target) {
       return target.selector && target.selector.some(function(selector) {
         return selector.type === 'TextQuoteSelector';
       });
     });
   };
 
+  vm.id = function() {
+    return domainModel.id;
+  };
+
   /**
     * @ngdoc method
     * @name annotation.AnnotationController#isHighlight.
@@ -747,6 +745,18 @@ function AnnotationController(
     return $q.when(tags.filter(query));
   };
 
+  vm.target = function() {
+    return domainModel.target;
+  };
+
+  vm.updated = function() {
+    return domainModel.updated;
+  };
+
+  vm.user = function() {
+    return domainModel.user;
+  };
+
   init();
 }
 

h/static/scripts/directive/test/annotation-test.js

@@ -1104,8 +1104,8 @@ describe('annotation.js', function() {
       });
 
       it('returns true if the annotation has quotes', function() {
-        var controller = createDirective().controller;
-        controller.annotation.target = [
+        var annotation = defaultAnnotation();
+        annotation.target = [
           {
             selector: [
               {
@@ -1114,6 +1114,8 @@ describe('annotation.js', function() {
             ]
           }
         ];
+        var controller = createDirective(annotation).controller;
+
         assert.isTrue(controller.hasQuotes());
       });
     });

h/templates/client/annotation.html

-<header class="annotation-header" ng-if="!vm.annotation.user">
+<header class="annotation-header" ng-if="!vm.user()">
   <strong>You must be signed in to create annotations.</strong>
 </header>
 
-<div ng-if="vm.annotation.user">
+<div ng-if="vm.user()">
   <header class="annotation-header">
     <!-- User -->
-    <span ng-if="vm.annotation.user">
+    <span ng-if="vm.user()">
       <span>
         <a class="annotation-user"
            target="_blank"
-           ng-href="{{vm.baseURI}}u/{{vm.annotation.user}}"
-           >{{vm.annotation.user | persona}}</a>
+           ng-href="{{vm.baseURI}}u/{{vm.user()}}"
+           >{{vm.user() | persona}}</a>
       </span>
 
       <span class="annotation-collapsed-replies">
@@ -47,15 +47,15 @@
     <!-- Timestamp -->
     <a class="annotation-timestamp"
        target="_blank"
-       title="{{vm.annotation.updated | moment:'LLLL'}}"
-       ng-if="!vm.editing() && vm.annotation.updated"
-       ng-href="{{vm.baseURI}}a/{{vm.annotation.id}}"
+       title="{{vm.updated() | moment:'LLLL'}}"
+       ng-if="!vm.editing() && vm.updated()"
+       ng-href="{{vm.baseURI}}a/{{vm.id()}}"
        >{{vm.timestamp}}</a>
   </header>
 
   <!-- Excerpts -->
   <section class="annotation-quote-list"
-           ng-repeat="target in vm.annotation.target track by $index"
+           ng-repeat="target in vm.target() track by $index"
            ng-if="vm.hasQuotes()">
     <excerpt enabled="vm.feature('truncate_annotations')">
       <blockquote class="annotation-quote"
@@ -135,7 +135,7 @@
          when="{'0': '', 'one': '1 reply', 'other': '{} replies'}"></a>
     </div>
 
-    <div class="annotation-actions" ng-if="!vm.editing() && vm.annotation.id">
+    <div class="annotation-actions" ng-if="!vm.editing() && vm.id()">
       <button class="small btn btn-clean"
               ng-click="vm.reply()"
               ><i class="h-icon-reply btn-icon"></i> Reply</button>