Search code examples
javascriptangularjsng-gridangular-ui-modal

Inject constant to a Controller in angular js(Issue with modal popup)


I am showing a modal popup on click of a button in a row in ng grid.So to get a form in the modal popup i am filling it with JSON Schema as follows

The Html Of Modal Pop Up is

<div class="modal-header">
      <h3 class="modal-title">Edit Row</h3>
  </div>
  <div class="modal-body">
    <form sf-schema="schema" sf-form="form" sf-model="entity"></form>
  </div>
  <div class="modal-footer">
      <button class="btn btn-success" ng-click="save()">Save</button>
      <button class="btn btn-warning" ng-click="$close()">Cancel</button>
  </div>
</div>

The schema is put into the constant like below in an external js file:

var app = angular.module("myApp", ['ngGrid','ui.bootstrap']);
app.constant('UserPopUpSchema', {
    type: 'object',
    properties: {
        FullName: { type: 'string', title: 'FullName' },
        UserName: { type: 'string', title: 'UserName' },
        Password: { type: 'string', title: 'Password' },
        EmailAddress: { type: 'string', title: 'EmailId' },
        Phone: {type:'string',title:'phNum'}
    }
});

So on click of a row in ng-grid I am executing a function called edit row ,which would open the pop up and fill the form according to the constant.

 $scope.editRow = function (grid,row) {
        $modal.open({
            templateUrl: 'PopUpTemplate.htm',
            controller:['$modalInstance', 'grid', 'row','UserPopUpSchema', function($modalInstance,grid,row){

        schema = 'UserPopUpSchema';

         entity = angular.copy(row.entity);
         form = [
           'FullName',
           'UserName',
           'Password',
           'EmailId',
          'phNum'
           ];


            }],
            resolve: {
                grid: function () { return grid; },
                row: function () { return row; }
            }
        });
    };

But here I am a bit confused on how to inject a constant to a controller function .As a result the modal appear with a blank form.

Appreciate any help!!


Solution

  • Try this

    $modal.open({
        templateUrl: 'PopUpTemplate.htm',
        controller: function ($modalInstance, grid, row, UserPopUpSchema) {
         // Do Stuff
        },
        resolve: {
            grid: function () {
                return grid;
            },
            row: function () {
                return row;
            },
            UserPopUpSchema: function () {
                return UserPopUpSchema;
            }
        }
    });