[英]AngularJS open modal from controller
我是angularjs的新手,并编写了一个打开包含网格的模板(inventory.html)的应用程序,它在网格底部有一个验证按钮,调用validate()来验证选定的网格行,在此之前我需要一个模式弹出并将用户名作为输入,然后进一步处理。
我的验证功能在模板的控制器内(即inventory.html)。 我有一个app.js,其中包含路由信息和controller.js,其中包含所有模板的控制器。
我的问题是,如果有任何方法我可以从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});
};
});
您可以使用包含模态的ui.bootstrap组件。 您不必使用单独的控制器。
我强烈建议你为你的模态编写一个单独的控制器。 这将极大地帮助您以后维护您的代码。
如果我理解正确(从你的标签)你使用这个: 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) {
请注意您传递的第三个参数,它将是值。
看这个例子:
/* 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"});
};
});
这解决了我的问题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;
}
}
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.