replaced remaining directives with components

Author: Nishad Bakshi

app/templates/ui/app/detail/similar-directive.html renamed to app/templates/ui/app/detail/similar-component.html

@@ -1,8 +1,8 @@
 <div class='similar-items'>
   <!--h3>Similar Documents</h3-->
   <ul>
-    <li ng-repeat="uri in similar">
+    <li ng-repeat="uri in $ctrl.similar">
       <a ui-sref="root.view({uri: uri})">{{ uri }}</a>
     </li>
   </ul>
-</div>
+</div>

app/templates/ui/app/detail/similar-component.js

@@ -0,0 +1,32 @@
+(function() {
+
+  'use strict';
+
+  angular.module('app.similar')
+    .component('mlSimilar', {
+      bindings: {
+        uri: '@',
+        limit: '@'
+      },
+      controller: MlSimilar,
+      templateUrl: 'app/detail/similar-component.html'
+    });
+
+  MlSimilar.$inject = ['MLRest'];
+
+  function MlSimilar(mlRest) {
+    var ctrl = this;
+
+    mlRest.extension('extsimilar', {
+      method: 'GET',
+      params: {
+        'rs:uri': ctrl.uri,
+        'rs:limit': ctrl.limit ? ctrl.limit : 10
+      }
+    }).then(function(response) {
+      ctrl.similar = response.data.similar;
+    });
+  }
+
+
+}());

app/templates/ui/app/detail/similar-directive.js

@@ -1,13 +1,13 @@
 <div>
-  <form ng-class="{'navbar-form navbar-right': mode === 'inline' }" ng-submit="ctrl.login()">
-    <div class="alert alert-danger" ng-show="ctrl.loginService.loginError()" ng-cloak>Username and/or Password Incorrect</div>
+  <form ng-class="{'navbar-form navbar-right': mode === 'inline' }" ng-submit="$ctrl.login()">
+    <div class="alert alert-danger" ng-show="$ctrl.loginService.loginError()" ng-cloak>Username and/or Password Incorrect</div>
     <div class="form-group">
-      <input type="text" placeholder="Username" class="form-control" ng-model="ctrl.username">
+      <input type="text" placeholder="Username" class="form-control" ng-model="$ctrl.username">
     </div>
     <div class="form-group">
-      <input type="password" placeholder="Password" class="form-control" ng-model="ctrl.password">
+      <input type="password" placeholder="Password" class="form-control" ng-model="$ctrl.password">
     </div>
-    <button ng-if="showCancel" type="button" class="btn btn-default" ng-click="ctrl.cancel()">Cancel</button>
+    <button ng-if="showCancel" type="button" class="btn btn-default" ng-click="$ctrl.cancel()">Cancel</button>
     <button type="submit" class="btn btn-success">Sign in</button>
   </form>
 </div>

app/templates/ui/app/login/login-dir.html renamed to app/templates/ui/app/login/login-component.html

@@ -0,0 +1,16 @@
+(function() {
+
+  'use strict';
+
+  angular.module('app.login')
+    .component('login', {
+      bindings: {
+        showCancel: '=',
+        mode: '@',
+        callback: '&'
+      },
+      controller: 'LoginCtrl',
+      templateUrl: 'app/login/login-component.html',
+    });
+
+}());

app/templates/ui/app/login/login.component.js

@@ -35,8 +35,8 @@
     }
 
     function callback(user) {
-      if ($scope.callback && !loginService.loginError()) {
-        $scope.callback({
+      if (ctrl.callback && !loginService.loginError()) {
+        ctrl.callback({
           user: user
         });
       }

app/templates/ui/app/login/login.controller.js

@@ -0,0 +1,4 @@
+<div ng-show="$ctrl.msg">
+  <h3>{{$ctrl.msg.title || $ctrl.msg}}</h3>
+  <p>{{$ctrl.msg.body}}</p>
+</div>

app/templates/ui/app/login/login.directive.js

@@ -1,23 +1,15 @@
-(function () {
+(function() {
 
   'use strict';
 
   angular.module('app.messageBoard')
-    .directive('messageBoard', MessageBoardDirective)
-    .controller('MessageBoardController', MessageBoardController);
-
-  function MessageBoardDirective() {
-    return {
-      restrict: 'E',
-      controller: 'MessageBoardController',
-      controllerAs: 'ctrl',
-      replace: true,
-      scope: {
+    .component('messageBoard', {
+      bindings: {
         msg: '='
       },
-      templateUrl: 'app/message-board/message-board-dir.html'
-    };
-  }
+      controller: MessageBoardController,
+      templateUrl: 'app/message-board/message-board-component.html',
+    });
 
   MessageBoardController.$inject = ['$scope'];