Question

我无法弄清楚如何从子作用域（ModalCtrl）更新父作用域（DirCrl）中的$ scope.dir。视图是一个带有单个文本输入的简单模态形式。提交时，文本输入绑定到子范围中的mkdir.name。子控制器对数据库进行REST调用，并应使用响应数据更新父作用域中的$ scope.dir。任何指导将不胜感激。

下面的代码段

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');
};
};

Answer 1

CORRECTION：

在孩子身上做类似的事情：

$scope.$emit('whatevereventnameyouwant', data);

在父母听取该事件：

$rootScope.$on('whatevereventnameyouwant', function(event, data) { console.log(data); });

Answer 2

使用承诺（标准方式）

关闭模式后，将数据返回给调用控制器的标准方法是在解析promise后注册回调：

modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });

使用活动

您还可以通过调用$emit：

在范围层次结构中向上调度事件

$scope.$emit(name, args);

然后，父作用域可以通过调用$on来监听事件：

$scope.$on('eventName', function(event, data) { console.log(data); });

创建新模态时，默认情况下，$ scope将是$ rootScope的子项。当调用$ emit（）时，它会查看它自己的范围（即模态的$ scope），对于任何已注册的侦听器，调用它们（如果存在），然后向上遍历范围链直到它运行出于父母。如果在创建模态时未指定父作用域，则在评估作用域链时，调用$ scope。$ emit（＆＃39; eventName＆＃39;，data）将绕过控制器的作用域。调用$ emit（）和$ on（）时，调用控制器和模态控制器都可以直接使用$ rootScope，但是你通常希望将模态的范围与调用控制器＆＃39相关联。 ; s $范围层次结构。要设置模态的父作用域，请将scope参数设置为$ scope，如下所示：

    var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    backdrop: true,
    windowClass: 'modal',
    controller: ModalInstanceCtrl,
    scope: $scope,
    resolve: {
        mkdir: function () {
            return $scope.mkdir;
        }
    }
});

Answer 3

听起来你想要$scope.$emit()支持父母。

在孩子身上做类似的事情：

$scope.$emit('whatevereventnameyouwant', data);

在父母听取该事件：

$scope.$on('whatevereventnameyouwant', function(event, data) { console.log(data); });

Answer 4

使用uibModal返回的promise接口。假设您在模态中有一个DELETE按钮，当您单击时，从父视图（父范围）中显示的列表中删除一个项目：

模式控制器

$scope.deleteItem = function() {
 $http.delete(...).then(function() {
   $uibModalInstance.close(true) // instead of true you can pass an object
 })
}

家长控制器

var modalInstance = $uibModal.open({
  templateUrl: '...',
  controller: 'ModalController',
});

modalInstance.result.then(function(data) {
  // what you pass in $uibModalInstance.close(true) will be accessible here.
  if (data) {
    refreshItems();
  }
});

Angularjs在模式表单提交后更新父作用域中的数据

4 个答案: