AngularJS modal öffnen von controller
Ich bin neu in angularjs, und eine Anwendung schreiben, wo eine Vorlage(inventory.html) mit Gitter geöffnet wird , hat es eine validate-button am unteren Rand des Gitters, das ruft validate() zur Validierung ausgewählten raster-Zeilen, bevor ich müssen ein modales popup und nehmen user-name als Eingabe und dann weiter Bearbeiten.
meine validieren-controller-Funktion ist in der Vorlage(d.h. inventory.html) .
Ich habe einen app.js die enthält routing-Informationen und controller.js die Controller enthält für alle Vorlagen.
Meine Frage ist, wenn es irgendeine Weise, die ich öffnen kann modal von validate(), nehmen Sie die Eingabe und gehen Sie weiter, ohne die Erstellung von separaten controller für die modale.
(Ich habe eine separate userinput.html für die modale.)
(Sorry, Wenn meine Frage nicht klar. Plz Hilfe ich bin stecken geblieben und haben versucht, viele Optionen von web -)
//Dies ist mein controller
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');});
};
}]);
- und dies ist modal controller
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});
};
});
- Was Sie versucht haben bis jetzt in der Codierung?
- Sorry, das versteht, Ihr Ihre Frage. Versuchen Sie, Bearbeiten Sie Ihre post
- Desai Beispiel von link auch versucht, indem controller in einer separaten Datei und die dann involking davon, - Einstellung-controller als inline-Funktion.
- Ich habe einen button, welcher eine Funktion aufruft, im inneren, die ich öffnen möchte modal und nehmen Benutzereingaben.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich würde stark vorschlagen, du schreibst einen separaten controller für Sie modal. Das wird sehr helfen Sie zu halten Sie Ihren code später.
Wenn ich das richtig verstanden habe (aus deinen tags) verwenden Sie eine dieser: https://angular-ui.github.io/bootstrap/
Vom main-controller, öffnen Sie den modal:
Hinweis: die resolve-Funktion, die Sie übergeben können zusätzliche Parameter wie dieses modal-controller.
In modal-controller:
Hinweis: der Dritte parameter, wird es sein, die Werte, die Sie übergeben haben.
angular.module('yourModuleName', ['ui.bootstrap']);
Können Sie ui.bootstrap ist Komponenten, die eine modal. Sie nicht haben, um eine separate Steuerung.
Schauen Sie dieses Beispiel:
Uncaught Error: [$injector:modulerr] Failed to instantiate module devices due to: Error: [$injector:modulerr] Failed to instantiate module ngRoute due to: Error: [$injector:unpr] Unknown provider: $compileProvider at hasOwnPropertyFn
Ich bekomme obige Fehlermeldung, wenn versucht oben genannte Lösung. Ich habe app.js die enthält routing-Informationen. hat es nichts zu tun hat diese modalen Vorlage routing?Dieser mein problem gelöst plnkr. Danke @Remigijus, @Emir Marques