AngularJS UI模式

时间:2017-05-01 14:45:16

标签: angularjs

我在模态中有一个注册表单。当我在模态中提交表单时,我想在数组$ scope.lists = []中推送已保存的项目。 $ scope.lists在ListsController中,我在ModalsController中有提交函数。

angular.module('app')
.controller('ListsController', function ($scope, listsRegister, $uibModal) {
    $scope.lists = [];

    $scope.openFormListModal = function () {
        var modalInstance = $uibModal.open({
            ...,
            controller: function ($scope, $uibModalInstance) {                  

                // Submiting the form
                $scope.submit = function () {

                    listsRegister.register($scope.list)                     
                        .then(function (response) {
                            if (response.insert) {
                                $scope.form.$setPristine();
                                $scope.form.$setUntouched();
                                $scope.list = {};

                                // $scope.lists.push(response); <- Is it possible to access the lists from the ListsController inside this Modal's Controller?
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                };
            },
            size: 'sm',
        });
    };
});

有没有一种从ListsController访问$ scope的好方法?我需要在保存数据后更新$ scope.lists数组。

3 个答案:

答案 0 :(得分:4)

您可以通过以下方式将值传递给ui模式:

position: relative

然后,您将能够在控制器内部访问myList

答案 1 :(得分:0)

这直接来自文档:

  

scope(类型:$ scope) - 要用于的父作用域实例   莫代尔的内容。默认为$ rootScope。

var modalInstance = $uibModal.open({
   scope: $scope,
   controller: function($scope) {
     ...
   },
   size: 'sm'
});

答案 2 :(得分:0)

请注意,您必须小心使用哪个$ scope。 Angular定义范围的层次结构,在这种情况下,您使用两个范围,即此层次结构中的父范围和子范围。您共享的每个控制器都有自己的$ scope对象。要更清楚地了解该主题,您可以查看:https://docs.angularjs.org/guide/scope

说,看起来你想要将子$ scope中的一些数据填充到父$ scope。为此,“您需要在父作用域中使用对象(而不是基元),然后您将能够直接从子作用域更新它”。这是Update parent scope variable中接受的答案的一部分。看看吧。

另外,我建议在控制器中使用“vm”表示法来保护$ scope对象。它提供了一个高于$ scope的层,您可以在其中完成所有工作。 John Papa(Angular的大师)推荐这是一个很好的做法。您可以在https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/AngularJS - Why use "Controller as vm"?

中获得更多信息