fix(importer): Fix console error on opening grid menu.

Updated the ui-grid-importer-menu-item directive to optionally require the uiGrid controller, much

like the regular ui-grid-menu-item directive.

fix #6535

Author: Portugal, Marcelo

misc/tutorial/207_importing_data.ngdoc

@@ -59,24 +59,26 @@ illustrates that doing so is not mandatory).
   <file name="app.js">
     var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.importer']);
 
-    app.controller('MainCtrl', ['$scope', '$http', '$interval', function ($scope, $http, $interval) {
+    app.controller('MainCtrl', function ($scope, $http, $interval) {
+      var vm = this;
+
       $scope.data = [];
-      $scope.gridOptions = {
+      vm.gridOptions = {
         enableGridMenu: true,
         data: 'data',
         importerDataAddCallback: function ( grid, newObjects ) {
           $scope.data = $scope.data.concat( newObjects );
         },
         onRegisterApi: function(gridApi){
-          $scope.gridApi = gridApi;
+          vm.gridApi = gridApi;
         }
       };
-    }]);
+    });
   </file>
 
   <file name="index.html">
-    <div ng-controller="MainCtrl">
-      <div ui-grid="gridOptions" ui-grid-importer class="grid"></div>
+    <div ng-controller="MainCtrl as $ctrl">
+      <div ui-grid="$ctrl.gridOptions" ui-grid-importer class="grid"></div>
     </div>
   </file>
 

src/features/importer/js/importer.js

@@ -722,28 +722,42 @@
       return {
         replace: true,
         priority: 0,
-        require: '^uiGrid',
+        require: '?^uiGrid',
         scope: false,
         templateUrl: 'ui-grid/importerMenuItem',
         link: function ($scope, $elm, $attrs, uiGridCtrl) {
+          var grid;
+
           var handleFileSelect = function( event ){
             var target = event.srcElement || event.target;
 
             if (target && target.files && target.files.length === 1) {
               var fileObject = target.files[0];
-              uiGridImporterService.importThisFile( grid, fileObject );
-              target.form.reset();
+
+              // Define grid if the uiGrid controller is present
+              if (typeof(uiGridCtrl) !== 'undefined' && uiGridCtrl) {
+                grid = uiGridCtrl.grid;
+
+                uiGridImporterService.importThisFile( grid, fileObject );
+                target.form.reset();
+              } else {
+                gridUtil.logError('Could not import file because UI Grid was not found.');
+              }
             }
           };
 
           var fileChooser = $elm[0].querySelectorAll('.ui-grid-importer-file-chooser');
-          var grid = uiGridCtrl.grid;
 
           if ( fileChooser.length !== 1 ){
             gridUtil.logError('Found > 1 or < 1 file choosers within the menu item, error, cannot continue');
           } else {
-            fileChooser[0].addEventListener('change', handleFileSelect, false);  // TODO: why the false on the end?  Google
+            fileChooser[0].addEventListener('change', handleFileSelect, false);
           }
+
+          $scope.$on('$destroy', function unbindEvents() {
+            // unbind jquery events to prevent memory leaks
+            fileChooser[0].removeEventListener('change', handleFileSelect, false);
+          });
         }
       };
     }

src/features/importer/test/uiGridImporterMenuItemDirective.spec.js

@@ -0,0 +1,68 @@
+describe('ui.grid.importer uiGridImporterMenuItem', function() {
+	'use strict';
+
+	var $compile, $templateCache, $rootScope, $scope, gridUtil, uiGridImporterService,
+		fileChooser, uiGridImporterMenuItem;
+
+	function compileImporterMenuItem(elem) {
+		uiGridImporterMenuItem = angular.element(elem);
+		$compile(uiGridImporterMenuItem)($scope);
+		$scope.$apply();
+
+		fileChooser = uiGridImporterMenuItem[0].querySelectorAll('.ui-grid-importer-file-chooser');
+	}
+
+	beforeEach(function() {
+		module('ui.grid');
+		module('ui.grid.importer');
+
+		inject(function(_$compile_, _$rootScope_, _$templateCache_, _gridUtil_, _uiGridImporterService_) {
+			$compile = _$compile_;
+			$rootScope = _$rootScope_;
+			$templateCache = _$templateCache_;
+			gridUtil = _gridUtil_;
+			uiGridImporterService = _uiGridImporterService_;
+		});
+
+		spyOn(gridUtil, 'logError').and.callFake(angular.noop);
+		spyOn(uiGridImporterService, 'importThisFile').and.callFake(angular.noop);
+
+		$scope = $rootScope.$new();
+
+		compileImporterMenuItem('<div ui-grid-importer-menu-item></div>');
+	});
+	afterEach(function() {
+		gridUtil.logError.calls.reset();
+		uiGridImporterService.importThisFile.calls.reset();
+	});
+	it('should compile the menu item', function() {
+		expect(uiGridImporterMenuItem.hasClass('ui-grid-menu-item')).toBe(true);
+	});
+	it('should do nothing when a change event is fired and there are no files selected', function() {
+		var event = new Event('change');
+
+		fileChooser[0].dispatchEvent(event);
+
+		expect(gridUtil.logError).not.toHaveBeenCalled();
+		expect(uiGridImporterService.importThisFile).not.toHaveBeenCalled();
+	});
+	it('should log an error if more than one file choosers are present on the menu item', function() {
+		$templateCache.put('ui-grid/importerMenuItem', '<div class="ui-grid-menu-item"><span class="ui-grid-importer-file-chooser"></span>' +
+			'<span class="ui-grid-importer-file-chooser"></span></div>');
+		compileImporterMenuItem('<div ui-grid-importer-menu-item></div>');
+
+		expect(gridUtil.logError).toHaveBeenCalledWith('Found > 1 or < 1 file choosers within the menu item, error, cannot continue');
+	});
+	describe('on $destroy', function() {
+		beforeEach(function() {
+			spyOn(fileChooser[0], 'removeEventListener').and.callThrough();
+			$scope.$broadcast('$destroy');
+		});
+		afterEach(function() {
+			fileChooser[0].removeEventListener.calls.reset();
+		});
+		it('should remove all event handlers', function() {
+			expect(fileChooser[0].removeEventListener).toHaveBeenCalled();
+		});
+	});
+});