It does not change after directive linking, there's no reason to
$observe() it.

Move feature() into AnnotationController

Move scope.feature() from the annotation directive to vm.feature() in
the AnnotationController. Just trying to move as much as possible out of
the directive's scope and link function into the controller, if we're
gonna use a directive controller here try to just use it instead of
randomly using the link function and scope for some things and the
controller for others.

h/static/scripts/directive/annotation.js

@@ -152,7 +152,8 @@ function errorMessage(reason) {
// @ngInject
function AnnotationController(
  $document, $q, $rootScope, $scope, $timeout, $window, annotationUI,
  annotationMapper, drafts, flash, groups, permissions, session, tags, time) {
  annotationMapper, drafts, flash, features, groups, permissions, session,
  tags, time) {

  var vm = this;

@@ -162,9 +163,12 @@ function AnnotationController(

  vm.action = 'view';
  vm.document = null;
  vm.editing = false;
  vm.isSidebar = false;
  vm.preview = 'no';
  // Give the template access to the feature flags.
  vm.feature = features.flagEnabled;
  // Copy isSidebar from $scope onto vm for consistency (we want this
  // directive's templates to always access variables from vm rather than
  // directly from scope).
  vm.isSidebar = $scope.isSidebar;
  vm.timestamp = null;

  /** The domain model, contains the currently saved version of the annotation
@@ -184,6 +188,20 @@ function AnnotationController(

  var highlight = model.$highlight;

  /**
   * @ngdoc method
   * @name annotation.AnnotationController#editing.
   * @returns {boolean} `true` if this annotation is currently being edited
   *   (i.e. the annotation editor form should be open), `false` otherwise.
   */
  vm.editing = function() {
    if (vm.action === 'create' || vm.action === 'edit') {
      return true;
    } else {
      return false;
    }
  };

  /**
    * @ngdoc method
    * @name annotation.AnnotationController#group.
@@ -193,6 +211,14 @@ function AnnotationController(
    return groups.get(model.group);
  };

  // Save on Meta + Enter or Ctrl + Enter.
  vm.onKeydown = function(event) {
    if (event.keyCode === 13 && (event.metaKey || event.ctrlKey)) {
      event.preventDefault();
      vm.save();
    }
  };

  /**
    * @ngdoc method
    * @name annotation.AnnotationController#tagsAutoComplete.
@@ -260,6 +286,19 @@ function AnnotationController(
    }
  };

  vm.share = function(event) {
    var $container = angular.element(event.currentTarget).parent();
    $container.addClass('open').find('input').focus().select();

    // We have to stop propagation here otherwise this click event will
    // re-close the share dialog immediately.
    event.stopPropagation();

    $document.one('click', function() {
      $container.removeClass('open');
    });
  };

  /**
    * @ngdoc method
    * @name annotation.AnnotaitonController#hasContent
@@ -292,9 +331,6 @@ function AnnotationController(
    * the annotation.
    */
  vm.authorize = function(action) {
    if (model === null) {
      return false;
    }
    // TODO: this should use auth instead of permissions but we might need
    // an auth cache or the JWT -> userid decoding might start to be a
    // performance bottleneck and we would need to get the id token into the
@@ -334,8 +370,6 @@ function AnnotationController(
      updateDraft(model);
    }
    vm.action = model.id ? 'edit' : 'create';
    vm.editing = true;
    vm.preview = 'no';
  };

  /**
@@ -345,7 +379,6 @@ function AnnotationController(
    *              if they are open.
    */
  vm.view = function() {
    vm.editing = false;
    vm.action = 'view';
  };

@@ -582,7 +615,7 @@ function AnnotationController(
  // the drafts service. They will be restored when this annotation is
  // next loaded.
  $scope.$on(events.GROUP_FOCUSED, function() {
    if (!vm.editing) {
    if (!vm.editing()) {
      return;
    }

@@ -622,47 +655,19 @@ function AnnotationController(
  *
  */
// @ngInject
function annotation($document, features) {
function annotation($document) {
  function linkFn(scope, elem, attrs, controllers) {
    var ctrl = controllers[0];
    var thread = controllers[1];
    var threadFilter = controllers[2];
    var counter = controllers[3];

    attrs.$observe('isSidebar', function(value) {
      if (value && value !== 'false') {
        ctrl.isSidebar = true;
      } else {
        ctrl.isSidebar = false;
      }
    });

    // Save on Meta + Enter or Ctrl + Enter.
    elem.on('keydown', function(event) {
      if (event.keyCode === 13 && (event.metaKey || event.ctrlKey)) {
        event.preventDefault();
        scope.$evalAsync(function() {
          ctrl.save();
        });
      }
    });

    // Give template access to feature flags.
    scope.feature = features.flagEnabled;

    scope.share = function(event) {
      var $container = angular.element(event.currentTarget).parent();
      $container.addClass('open').find('input').focus().select();

      // We have to stop propagation here otherwise this click event will
      // re-close the share dialog immediately.
      event.stopPropagation();

      $document.one('click', function() {
        $container.removeClass('open');
      });
    };
    elem.on('keydown', ctrl.onKeydown);

    // FIXME: Replace this counting code with something more sane, and
    // something that doesn't involve so much untested logic in the link
    // function (as opposed to unit-tested methods on the AnnotationController,
    // for example).
    // Keep track of edits going on in the thread.
    if (counter !== null) {
      // Expand the thread if descendants are editing.
@@ -711,7 +716,8 @@ function annotation($document, features) {
      isLastReply: '=',
      replyCount: '@annotationReplyCount',
      replyCountClick: '&annotationReplyCountClick',
      showReplyCount: '@annotationShowReplyCount'
      showReplyCount: '@annotationShowReplyCount',
      isSidebar: '='
    },
    templateUrl: 'annotation.html'
  };

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

@@ -358,6 +358,23 @@ describe('annotation', function() {
    });
  });

  describe('AnnotationController.editing()', function() {
    it('returns true if action is "create"', function() {
      controller.action = 'create';
      assert(controller.editing());
    });

    it('returns true if action is "edit"', function() {
      controller.action = 'edit';
      assert(controller.editing());
    });

    it('returns false if action is "view"', function() {
      controller.action = 'view';
      assert(!controller.editing());
    });
  });

  describe('when the annotation is a highlight', function() {
    beforeEach(function() {
      annotation.$highlight = true;
@@ -922,7 +939,7 @@ describe('annotation', function() {
        text: 'unsaved-text'
      });
      createDirective();
      assert.isTrue(controller.editing);
      assert.isTrue(controller.editing());
    });

    it('uses the text and tags from the draft if present', function() {

h/templates/client/annotation.html

@@ -30,7 +30,7 @@
              title="This annotation is visible only to you.">
          <i class="h-icon-lock"></i><span class="annotation-header__group-name" ng-show="!vm.group().url">Only me</span>
        </span>
        <i class="h-icon-border-color" ng-show="vm.isHighlight() && !vm.editing" title="This is a highlight. Click 'edit' to add a note or tag."></i>
        <i class="h-icon-border-color" ng-show="vm.isHighlight() && !vm.editing()" title="This is a highlight. Click 'edit' to add a note or tag."></i>
        <span class="annotation-citation"
              ng-bind-html="vm.document | documentTitle"
              ng-if="!vm.isSidebar">
@@ -48,7 +48,7 @@
    <a class="annotation-timestamp"
       target="_blank"
       title="{{vm.annotation.updated | moment:'LLLL'}}"
       ng-if="!vm.editing && vm.annotation.updated"
       ng-if="!vm.editing() && vm.annotation.updated"
       ng-href="{{vm.baseURI}}a/{{vm.annotation.id}}"
       >{{vm.timestamp}}</a>
  </header>
@@ -57,7 +57,7 @@
  <section class="annotation-quote-list"
           ng-repeat="target in vm.annotation.target track by $index"
           ng-if="vm.hasQuotes()">
    <excerpt enabled="feature('truncate_annotations')">
    <excerpt enabled="vm.feature('truncate_annotations')">
      <blockquote class="annotation-quote"
                  ng-bind-html="selector.exact"
                  ng-repeat="selector in target.selector
@@ -70,16 +70,16 @@

  <!-- Body -->
  <section name="text" class="annotation-body">
    <excerpt enabled="feature('truncate_annotations') && !vm.editing">
    <excerpt enabled="vm.feature('truncate_annotations') && !vm.editing()">
      <markdown ng-model="vm.annotation.text"
           read-only="!vm.editing"
           read-only="!vm.editing()"
           ></markdown>
    </excerpt>
  </section>
  <!-- / Body -->

  <!-- Tags -->
  <div class="annotation-body form-field" ng-if="vm.editing">
  <div class="annotation-body form-field" ng-if="vm.editing()">
    <tags-input ng-model="vm.annotation.tags"
                name="tags"
                class="tags"
@@ -94,7 +94,7 @@
  </div>

  <div class="annotation-body tags tags-read-only"
       ng-if="vm.annotation.tags.length && !vm.editing">
       ng-if="vm.annotation.tags.length && !vm.editing()">
    <ul class="tag-list">
      <li class="tag-item" ng-repeat="tag in vm.annotation.tags">
        <a href="/stream?q=tag:'{{tag.text|urlencode}}'" target="_blank">{{tag.text}}</a>
@@ -104,7 +104,7 @@
  <!-- / Tags -->

  <footer class="annotation-footer">
    <div class="annotation-form-actions" ng-if="vm.editing" ng-switch="vm.action">
    <div class="annotation-form-actions" ng-if="vm.editing()" ng-switch="vm.action">
      <button ng-switch-when="delete"
              ng-click="vm.save()"
              class="dropdown-menu-btn"><i class="h-icon-check btn-icon"></i> Delete</button>
@@ -119,7 +119,7 @@
    </div>

    <div class="annotation-section annotation-license"
         ng-show="vm.isShared() && vm.editing">
         ng-show="vm.isShared() && vm.editing()">
      <a href="http://creativecommons.org/publicdomain/zero/1.0/"
         title="View more information about the Creative Commons Public Domain license"
         target="_blank">
@@ -135,13 +135,13 @@
         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.annotation.id">
      <button class="small btn btn-clean"
              ng-click="vm.reply()"
              ><i class="h-icon-reply btn-icon"></i> Reply</button>
      <span class="share-dialog-wrapper">
        <button class="small btn btn-clean"
                ng-click="share($event)"
                ng-click="vm.share($event)"
                ><i class="h-icon-link btn-icon"></i> Link</button>
        <span class="share-dialog" ng-click="$event.stopPropagation()">
          <a target="_blank"

h/templates/client/thread.html

@@ -15,7 +15,7 @@
         name="annotation"
         annotation="vm.container.message"
         is-last-reply="$last"
         is-sidebar="{{isSidebar}}"
         is-sidebar="isSidebar"
         annotation-show-reply-count="{{vm.shouldShowNumReplies()}}"
         annotation-reply-count="{{vm.numReplies()}}"
         annotation-reply-count-click="vm.toggleCollapsed()"