Convert `<sort-dropdown>` to a component

src/sidebar/app.js

@@ -151,6 +151,7 @@ module.exports = angular.module('h', [
   .component('selectionTabs', require('./directive/selection-tabs'))
   .component('sidebarTutorial', require('./directive/sidebar-tutorial').component)
   .component('shareDialog', require('./directive/share-dialog'))
+  .component('sortDropdown', require('./directive/sort-dropdown'))
   .component('timestamp', require('./directive/timestamp'))
 
   .directive('excerpt', require('./directive/excerpt').directive)
@@ -161,7 +162,6 @@ module.exports = angular.module('h', [
   .directive('hOnTouch', require('./directive/h-on-touch'))
   .directive('hTooltip', require('./directive/h-tooltip'))
   .directive('markdown', require('./directive/markdown'))
-  .directive('sortDropdown', require('./directive/sort-dropdown'))
   .directive('spinner', require('./directive/spinner'))
   .directive('statusButton', require('./directive/status-button'))
   .directive('svgIcon', require('./directive/svg-icon'))

src/sidebar/directive/sort-dropdown.js

 'use strict';
 
-module.exports = function () {
-  return {
-    controller: function () {},
-    restrict: 'E',
-    scope: {
-      /** The name of the currently selected sort key. */
-      sortKey: '<',
-      /** A list of possible keys that the user can opt to sort by. */
-      sortKeysAvailable: '<',
-      /** Called when the user changes the sort key. */
-      onChangeSortKey: '&',
-    },
-    template: require('../templates/sort_dropdown.html'),
-  };
+module.exports = {
+  controllerAs: 'vm',
+  controller: function () {},
+  bindings: {
+    /** The name of the currently selected sort key. */
+    sortKey: '<',
+    /** A list of possible keys that the user can opt to sort by. */
+    sortKeysAvailable: '<',
+    /** Called when the user changes the sort key. */
+    onChangeSortKey: '&',
+  },
+  template: require('../templates/sort_dropdown.html'),
 };

src/sidebar/directive/test/sort-dropdown-test.js

@@ -7,7 +7,7 @@ var util = require('./util');
 describe('sortDropdown', function () {
   before(function () {
     angular.module('app', [])
-      .directive('sortDropdown', require('../sort-dropdown'));
+      .component('sortDropdown', require('../sort-dropdown'));
   });
 
   beforeEach(function () {

src/sidebar/templates/sort_dropdown.html

@@ -3,16 +3,16 @@
     type="button"
     class="top-bar__btn"
     dropdown-toggle
-    title="Sort by {{sortKey}}">
+    title="Sort by {{vm.sortKey}}">
     <i class="h-icon-sort"></i>
   </button>
   <div class="dropdown-menu__top-arrow"></div>
   <ul class="dropdown-menu pull-right" role="menu">
     <li class="dropdown-menu__row"
-        ng-repeat="key in sortKeysAvailable"
-        ng-click="onChangeSortKey({sortKey: key})"
+        ng-repeat="key in vm.sortKeysAvailable"
+        ng-click="vm.onChangeSortKey({sortKey: key})"
         ><span class="dropdown-menu-radio"
-               ng-class="{'is-selected' : sortKey === key}"
+               ng-class="{'is-selected' : vm.sortKey === key}"
         ></span><a class="dropdown-menu__link" href="">{{key}}</a></li>
   </ul>
 </span>