在父范围Angularjs更新数据模式的形式提交后 [英] Angularjs updating data in parent scope after modal form submission
问题描述
我无法弄清楚如何更新从子作用域（ModalCtrl）父作用域（DirCrl）在$ scope.dir。视图是一个简单的模式形式单一的文字输入。在提交的文本输入，势必在孩子范围mkdir.name。孩子的控制器使得REST调用到数据库并应更新$ scope.dir父范围的响应数据。任何指导将大大AP preciated。 code段以下
app.controller（'DirCtrl'，['$范围，$ HTTP'，函数（$范围，$ HTTP）{$ scope.dir = {};
$ scope.mySelections = [];$ HTTP（{
方法：GET，
网址：'//本地主机：9090 / FX / V1 / DIR / 52cdc7304c3525ac0c5cdd3a
}）
.success（功能（数据，状态，头，配置）{
$ scope.dir =数据;
$ scope.children = data.children;
}）
.error（功能（数据，状态，头，配置）{
}）;}]）;VAR ModalCtrl =功能（$范围，$模式，$日志）{$ scope.mkdir = {
名称：'名'，
数据：{}
};$ $范围= parent.benben01。$ scope.open =功能（）{ VAR modalInstance = $ modal.open（{
templateUrl：myModalContent.html'，
背景：真实，
windowClass：莫代尔，
控制器：ModalInstanceCtrl，
解析：{
MKDIR：功能（）{
返回$ scope.mkdir;
}
}
}）; modalInstance.result.then（函数（）{
$ $范围= parent.children $ scope.mkdir.data.children。
}）;
};
};VAR ModalInstanceCtrl =功能（$范围，$ modalInstance，$ HTTP，$日志，MKDIR）{
$ scope.mkdir =的mkdir;
$ scope.submit =功能（）{
$ log.log（目录下创建的名称'）;
$ log.log（mkdir.name）; $ HTTP（{
方法：GET，
网址：'//本地主机：9090 / FX / V1 / DIR / 52cdcce74c358cdfe2fa2c83
}）
.success（功能（数据，状态，头，配置）{ $ scope.mkdir.data =数据;
}）
.error（功能（数据，状态，头，配置）{ }）;
$ modalInstance.dismiss（'取消'）;
}
$ scope.cancel =功能（）{
$ modalInstance.dismiss（'取消'）;
};
};
使用承诺（标准方式）
要回数据返回到调用控制器一旦模式是封闭的标准方法是注册一个回调，一旦承诺得到解决：
modalInstance.result.then（功能（将selectedItem）{
$ scope.selected = selectedItem属性;
}，函数（）{
$ log.info（'模态在驳回：+新的Date（））;
}）;
使用事件
您还可以通过向上的范围层次通过调用的 $ EMIT ：
$ $范围发射（名称args）;
父范围可以然后通过调用 $监听的事件在：
$ $范围在（'eventName的'，函数（事件数据）{执行console.log（数据）;}）;
在创建一个新的模式，它的$范围将默认为$ rootScope的孩子。当调用$ EMIT（），它看起来在它自己的范围（即模态的$范围内）任何注册的侦听器，调用它们（如present），然后遍历作用域链向上，直到耗尽父母。如果在创建模式时，调用$范围没有指定父范围。$排放（eventName的'，数据）评价范围链时会绕过控制器的范围。无论是调用控制器和模态控制器可以调用$放出（）和$的（）当与$ rootScope直接工作，但你通常要一个模式的范围与它的调用控制器的$范围层次结构相关联。要设置模式的父范围，将范围设置参数设置为$范围如下：
VAR modalInstance = $ modal.open（{
templateUrl：myModalContent.html'，
背景：真实，
windowClass：莫代尔，
控制器：ModalInstanceCtrl，
适用范围：$范围，
解析：{
MKDIR：功能（）{
返回$ scope.mkdir;
}
}
}）;
I am unable to figure out how to update the $scope.dir in the parent scope (DirCrl) from the child scope (ModalCtrl). The view is a simple modal form with a single text input. On submit the text input is bound to mkdir.name in the child scope. The child controller makes a REST call to a database and should update $scope.dir in the parent scope with the response data. Any guidance will be greatly appreciated. Code snippet below
app.controller('DirCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.dir = {};
$scope.mySelections = [];
$http({
method: 'GET',
url: '//localhost:9090/fx/v1/dir/52cdc7304c3525ac0c5cdd3a'
})
.success(function (data, status, headers, config) {
$scope.dir = data;
$scope.children = data.children;
})
.error(function (data, status, headers, config) {
});
}]);
var ModalCtrl = function ($scope, $modal, $log) {
$scope.mkdir = {
name: 'name',
data: {}
};
$scope.$parent.ben = 'ben01';
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
backdrop: true,
windowClass: 'modal',
controller: ModalInstanceCtrl,
resolve: {
mkdir: function () {
return $scope.mkdir;
}
}
});
modalInstance.result.then(function () {
$scope.$parent.children = $scope.mkdir.data.children;
});
};
};
var ModalInstanceCtrl = function ($scope, $modalInstance, $http, $log, mkdir) {
$scope.mkdir = mkdir;
$scope.submit = function () {
$log.log('name of directory to create');
$log.log(mkdir.name);
$http({
method: 'GET',
url: '//localhost:9090/fx/v1/dir/52cdcce74c358cdfe2fa2c83'
})
.success(function (data, status, headers, config) {
$scope.mkdir.data = data;
})
.error(function (data, status, headers, config) {
});
$modalInstance.dismiss('cancel');
}
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
Using promise (standard way)
The standard way to return data back to the invoking controller once the modal is closed is to register a callback once the promise is resolved:
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
Using events
You can also dispatch an event upwards through the scope hierarchy by invoking $emit:
$scope.$emit(name, args);
The parent scope can then listen for the event by invoking $on:
$scope.$on('eventName', function(event, data) { console.log(data); });
When creating a new modal, it's $scope will be a child of the $rootScope by default. When $emit() is invoked, it looks on it's own scope (i.e. the modal's $scope) for any registered listeners, invokes them (if present), then traverses the scope chain upwards until it runs out of parents. If the parent scope isn't specified when creating the modal, calling $scope.$emit('eventName', data) will bypass the controller's scope when evaluating the scope chain. Both the invoking controller and the modal controller can work directly with the $rootScope when calling $emit() and $on(), but you typically want to associate a modal's scope with it's invoking controller's $scope hierarchy. To set the parent scope of the modal, set the scope parameter to $scope as following:
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
backdrop: true,
windowClass: 'modal',
controller: ModalInstanceCtrl,
scope: $scope,
resolve: {
mkdir: function () {
return $scope.mkdir;
}
}
});
这篇关于在父范围Angularjs更新数据模式的形式提交后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
