[英]Pass data from an Angular modal's controller back to the main controller
[英]Pass Angular modal data to main controller
我有一個控制器,我在里面使用了模態。 請檢查這個
'use strict'
var DataMod = angular.module('Data', ["angularGrid", 'ui.bootstrap.contextMenu', 'ui.bootstrap']);
DataMod.controller('DataController', ['$scope', '$compile', '$uibModal', '$log','$rootScope', '$http', function ($scope, $compile, $uibModal,$log, $rootScope, $http, ngUtilityService) {
$scope.adduser = function () {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl
});
};
//use data value here.
var ModalInstanceCtrl = function ($scope, $uibModalInstance) {
var data = "analog";
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
};
}
]);
如您所見,用戶單擊“添加用戶”選項卡。 添加用戶函數被執行並彈出一個模式。 我已經完成了幾個內部處理。
最后,我想將一個變量“數據”傳輸回主控制器。 有人可以讓我舉一個簡單的例子,說明如何將數據從模態傳輸到控制器。
我已經看到了幾個例子,並且理解了 resolve 將幫助我實現它。 但我對此完全感到困惑......
如果你在 DataController 的范圍內定義 ModalInstanceCtrl 你應該能夠使用閉包共享一個變量。
前任:
var data = {
name:"Foo"
}
$scope.data = data;
var ModalInstanceCtrl = function ($scope, $uibModalInstance) {
//accessing data from the controller using closure.
data.name = "analog";
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
};
$scope.adduser = function () {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl
});
};
$scope.processData = function(){
//do something with data
};
$scope.$watch('data', function (old, new){
//if data changed do somthing
});
//if you use data here it will have no value yet.
//use data value here.
您還可以使用服務並讓兩個控制器訪問它。 模態將更改此服務中變量的狀態,DataController 將從服務中獲取它。
服務的一個例子是:
DataMod.Service('Data', function () {
var data = {
FirstName: ''
};
return {
getFirstName: function () {
return data.FirstName;
},
setFirstName: function (firstName) {
data.FirstName = firstName;
}
};
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.