AngularJS open modal от контроллера

Question

Я новичок в angularjs и записываю приложение, в котором открыт шаблон (inventory.html), содержащий сетку, он имеет кнопку подтверждения в нижней части сетки, которая вызывает validate() для проверки выбранного строки сетки, до этого мне нужен модальный всплывающее окно и введите имя пользователя в качестве ввода, а затем обработайте его дальше.

моя функция проверки правильности внутри контроллера шаблона (то есть inventory.html). У меня есть app.js, который содержит информацию о маршрутизации и controller.js, которая содержит контроллеры для всех шаблонов.

Мой вопрос в том, есть ли способ, которым я могу открыть modal из validate(), принять пользовательский ввод и продолжить работу без написания отдельного контроллера для модального. (у меня есть отдельный userinput.html для модального.)

(Извините, если мой вопрос не ясно. Plz помощь я застрял с этим и перепробовал много вариантов из Интернета)

// Это мой контроллер

var app = angular.module('app', []); 
app.controller('InventoryCtrl',['$scope','$location','$http','$modal',function($scope, $location, $http,$modal{console.log("Inside inventory ctrlr"); 

// Validate Function for validate button click 
$scope.validate = function() 
    { 
     $scope.user = null; 
     $scope.build = null; 
     // Show modal to take user inputs for environment 
     var modalInstance = $modal.open(
     { 
      controller : "inputModalCntrl", 
      templateUrl : "../partials/addEnvironment.html", 
      resolve: { 
       $callback: function() { 
        return function(param,user,build){ 
         /* This function print value(param) dispached in modal controller */ 
         console.log(param,user,build); 
            $scope.user = user; 
            $scope.build = build; 
        }; 
       }, 
       $send: function(){ 
        return function(){ 
         /* This function send param for the modal */ 
         return {param1:"Hello Word Main"}; 
        }; 
       } 
      } 
     }); 
// This is further process of function 
    postdata = {}; 
    var dlist = $scope.gridApi.selection.getSelectedRows(); 
     postdata['dlist'] = dlist; 
    $http({ url: "/api/check", data: postdata, method: "POST" }) 
    .success(function (response) { alert(response);}) 
    .error(function() { alert('Error getting data');}); 
}; 
    }]); 

и это модальный контроллер

app.controller("inputModalCntrl", function($scope, $modalInstance, $callback, $send) { 
$scope.init = function(){ 
    /* This function print value(param) dispached in main controller */ 
    console.log($send); 

    /* This send data to main controller */ 
    $callback({param1:"Hello Word Modal", user :user, build : build}); 
}; 
}); 

Answer 1

Вы можете использовать ui.bootstrap's компоненты, которые включают в себя режимные. Вам не придется использовать отдельный контроллер.

Answer 2

Я бы настоятельно предложил вам написать отдельный контроллер для вас, модальный. Это значительно поможет вам сохранить ваш код позже.

Если я правильно (из тегов) понимаю, что вы используете эти один: https://angular-ui.github.io/bootstrap/ Из основного контроллера откройте модальность:

var modalInstance = $modal.open({ 
     animation: $scope.animationsEnabled, 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     size: size, 
     resolve: { 
     items: function() { 
      return $scope.items; 
     } 
     } 
    }); 

Примечания Функции решительности, вы можете передать дополнительные параметры, как это модальный контроллер.

В модальном регуляторе:

angular.module('your.awesomeApp').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) { 

примечания третьего параметр, это будет значение, что вы прошли.

Answer 3

Посмотрите этот пример:

/* Main controller */ 
App.controller("JustificativaModalController", function($scope, $modal) { 
    var modalInstance = $modal.open({ 
     controller : "ControllerModal", 
     templateUrl : "TemplateModal.html", 
     resolve: { 
      $callback: function() { 
       return function(param){ 
        /* This function print value(param) dispached in modal controller */ 
        console.log(param); 
       }; 
      }, 
      $send: function(){ 
       return function(){ 
        /* This function send param for the modal */ 
        return {param1:"Hello Word Main"}; 
       }; 
      } 
     } 
    }); 
}); 

/* Modal controller */ 
App.controller("JustificativaModalController", function($scope, $modalInstance, $callback, $send) { 
    $scope.init = function(){ 
     /* This function print value(param) dispached in main controller */ 
     console.log($send); 

     /* This send data to main controller */ 
     $callback({param1:"Hello Word Modal"}); 
    }; 
}); 

Answer 4

Это решило мою проблему plnkr. Спасибо @Remigijus, @Emir Marques

$scope.open = function (user) { 
      $scope.user = user; 
      $modal.open({ 
       templateUrl: 'myModalContent.html', 
       backdrop: true, 
       windowClass: 'modal', 
       controller: function ($scope, $modalInstance, $log, user) { 
        $scope.user = user; 
        $scope.submit = function() { 
         $log.log('Submiting user info.'); 
         $log.log(JSON.stringify(user)); 
         $modalInstance.dismiss('cancel'); 
        } 
        $scope.cancel = function() { 
         $modalInstance.dismiss('cancel'); 
        }; 
       }, 
       resolve: { 
        user: function() { 
         return $scope.user; 
        } 
       } 
      }); 
     };