Я показываю модальное всплывающее окно при нажатии кнопки в строке в сетке ng. Чтобы получить форму в модальном всплывающем окне, я заполняю ее схемой JSON следующим образом.

HTML модального всплывающего окна

<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>

Схема помещается в константу, как показано ниже во внешнем js-файле:

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'}
    }
});

Итак, по щелчку строки в ng-grid я выполняю функцию с именем edit row, которая открывает всплывающее окно и заполняет форму в соответствии с константой.

 $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; }
            }
        });
    };

Но здесь я немного запутался в том, как ввести константу в функцию контроллера. В результате модал появляется с пустой формой.

Ценю любую помощь !!

1
bhanu.cs 18 Дек 2015 в 15:49

3 ответа

Лучший ответ

Попробуй это

$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;
        }
    }
});
0
Vivek 18 Дек 2015 в 12:58

$ modal.open () принимает свойство «resol», в котором вы можете передавать все нужные вам данные.

$modal.open({
    templateUrl: 'templateUrl',
    controller: 'controllerName',
    resolve: {
        data: function(){
            // Here, return a JSON object containing all the data you want to pass to the controller.  
        }
    }
});

Тогда ваш контроллер будет выглядеть так:

yourApp.controller('controllerName', function ( $scope, $modalInstance, data ){
    // Here, using data, you can access the JSON object you passed previously.
});
0
Eria 18 Дек 2015 в 13:03
 app.controller('Myctrl',function($scope,UserPopUpSchema) {
    $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; }
            UserPopUpSchema: function () { return UserPopUpSchema; }
        }
    });
};
 });

 and in the modal instance controller inject the UserPopUpSchema along with grid and row
0
user5621153user5621153 18 Дек 2015 в 13:02