[英]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.