Added modal functionality

Author: smeidan

app/scripts/controllers/main.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('codeSearchApp')
-  .controller('MainCtrl', function ($scope, $http, $timeout) {
+  .controller('MainCtrl', function ($scope, $http, $timeout, $modal, $log) {
     $scope.isCollapsed = {collapse:false};
     $scope.codeSnippits = [];
     $scope.fileUrl = {url: ''};
@@ -53,4 +53,25 @@ angular.module('codeSearchApp')
       });
     };
 
+    $scope.open = function(size, snippitData) {
+
+      var modalInstance = $modal.open({
+        templateUrl: '/partials/codesnippetmodal',
+        controller: 'ModalCtrl',
+        size: size,
+        resolve: {
+          data: function() {
+            return {
+              snippitData: snippitData
+            }
+          }
+        }
+      });
+
+      modalInstance.result.then(function(selectedItem) {
+        $scope.selected = selectedItem;
+      }, function() {
+        $log.info('Modal dismissed at: ' + new Date());
+      });
+    };
   });

app/scripts/controllers/modal.js

@@ -0,0 +1,12 @@
+'use strict';
+
+angular.module('codeSearchApp')
+  .controller('ModalCtrl', function ($scope, $http, $modalInstance, data) {
+
+    $scope.ok = function () {
+      $modalInstance.dismiss('cancel');
+    };
+
+    $scope.snippitData = data.snippitData;
+
+  });

app/views/index.html

@@ -71,6 +71,7 @@
         <script src="scripts/controllers/snippit.js"></script>
         <script src="scripts/filters/startpagefrom.js"></script>
         <script src="scripts/filters/paginatefrom.js"></script>
+        <script src="scripts/controllers/modal.js"></script>
         <!-- endbuild -->
 </body>
 </html>

app/views/partials/codesnippetmodal.html

@@ -0,0 +1,4 @@
+<div>
+  <pre>{{snippitData}}</pre>
+</div>
+<a style="color: black;" ng-click="ok()">&times;</a>

app/views/partials/main.html

@@ -91,7 +91,7 @@ <h3>Results:</h3>
   <div class="snippit" ng-repeat="snippit in codeSnippits |
                                   startPageFrom : page.currPage*page.resultsPerPage |
                                   limitTo : page.resultsPerPage track by $index">
-    <pre>{{snippit}}</pre>
+    <pre ng-click="open('lg', snippit)">{{snippit}}</pre>
   </div>
   <div>
     <button ng-disabled="page.currPage === 0"

test/client/spec/controllers/modal.js

@@ -0,0 +1,28 @@
+'use strict';
+
+describe('Controller: ModalctrlCtrl', function () {
+
+  // load the controller's module
+  beforeEach(module('codeSearchApp'));
+
+  var ModalCtrl,
+    scope,
+    $httpBackend;
+
+  // Initialize the controller and a mock scope
+  beforeEach(inject(function (_$httpBackend_, $controller, $rootScope) {
+    $httpBackend = _$httpBackend_;
+    $httpBackend.expectGET('/api/awesomeThings')
+      .respond(['HTML5 Boilerplate', 'AngularJS', 'Karma', 'Express']);
+    scope = $rootScope.$new();
+    ModalCtrl = $controller('ModalCtrl', {
+      $scope: scope
+    });
+  }));
+
+  it('should attach a list of awesomeThings to the scope', function () {
+    expect(scope.awesomeThings).toBeUndefined();
+    $httpBackend.flush();
+    expect(scope.awesomeThings.length).toBe(4);
+  });
+});