fix(resize-columns): Replace with

Also, updated tutorial page to match angular style guide standards.

Author: Portugal, Marcelo

misc/tutorial/204_column_resizing.ngdoc

@@ -59,8 +59,10 @@ $scope.gridOptions = {
   <file name="app.js">
     var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.resizeColumns', 'ui.grid.moveColumns']);
 
-    app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
-      $scope.gridOptions = {
+    app.controller('MainCtrl', function ($scope, $http) {
+      var vm = this;
+
+      vm.gridOptions = {
         enableSorting: true,
         columnDefs: [
           { field: 'name', minWidth: 200, width: 250, enableColumnResizing: false },
@@ -71,19 +73,19 @@ $scope.gridOptions = {
 
       $http.get('/data/100.json')
         .then(function(response) {
-          $scope.gridOptions.data = response.data;
+          vm.gridOptions.data = response.data;
         });
-    }]);
+    });
   </file>
   <file name="index.html">
-    <div ng-controller="MainCtrl">
+    <div ng-controller="MainCtrl as $ctrl">
       <strong>Drag</strong> a the column separator to resize; <strong>double-click</strong> to size according to rendered column contents.
       <br>
       <br>
       The column will obey any <i>minWidth</i> or <i>maxWidth</i> constraints you give it.
       <br>
       <br>
-      <div ui-grid="gridOptions" class="grid" ui-grid-resize-columns ui-grid-move-columns></div>
+      <div ui-grid="$ctrl.gridOptions" class="grid" ui-grid-resize-columns ui-grid-move-columns></div>
     </div>
   </file>
   <file name="main.css">

src/features/resize-columns/js/ui-grid-column-resizer.js

@@ -14,8 +14,8 @@
    */
   var module = angular.module('ui.grid.resizeColumns', ['ui.grid']);
 
-  module.service('uiGridResizeColumnsService', ['gridUtil', '$q', '$timeout',
-    function (gridUtil, $q, $timeout) {
+  module.service('uiGridResizeColumnsService', ['gridUtil', '$q', '$rootScope',
+    function (gridUtil, $q, $rootScope) {
 
       var service = {
         defaultGridOptions: function(gridOptions){
@@ -103,7 +103,7 @@
         },
 
         fireColumnSizeChanged: function (grid, colDef, deltaChange) {
-          $timeout(function () {
+          $rootScope.$applyAsync(function () {
             if ( grid.api.colResizable ){
               grid.api.colResizable.raise.columnSizeChanged(colDef, deltaChange);
             } else {
@@ -190,7 +190,7 @@
   }]);
 
   // Extend the uiGridHeaderCell directive
-  module.directive('uiGridHeaderCell', ['gridUtil', '$templateCache', '$compile', '$q', 'uiGridResizeColumnsService', 'uiGridConstants', '$timeout', function (gridUtil, $templateCache, $compile, $q, uiGridResizeColumnsService, uiGridConstants, $timeout) {
+  module.directive('uiGridHeaderCell', ['gridUtil', '$templateCache', '$compile', '$q', 'uiGridResizeColumnsService', 'uiGridConstants', function (gridUtil, $templateCache, $compile, $q, uiGridResizeColumnsService, uiGridConstants) {
     return {
       // Run after the original uiGridHeaderCell
       priority: -10,
@@ -244,8 +244,8 @@
 
               displayResizers();
 
-              var waitDisplay = function(){
-                $timeout(displayResizers);
+              var waitDisplay = function() {
+                $scope.$applyAsync(displayResizers);
               };
 
               var dataChangeDereg = grid.registerDataChangeCallback( waitDisplay, [uiGridConstants.dataChange.COLUMN] );