Question

我的应用程序中有一个按钮可以打开一个模态。此模式在UI Routes状态中配置为使用新URL进行操作。

在Modals Controller中，我需要访问父$ scope。在父$ scope中，我有一个需要在子状态中访问的数组：todolist.add。

为什么我需要访问父$ scope？因为我想操纵父$ scope数据而不再调用服务器。

在UI路由器中访问父作用域的最佳方法是什么？

.controller('ListsController', function ($scope, ...) {
        $scope.lists = []; // there are data in this $scope array
    });

。

.controller('FormListModalController', function ($scope, ...) {
        $scope.$parent.todolist.lists; // <- in this Modal's Ctrl I need to access the parent $scope (ListsController)
    });

{{1}}

Answer 1

你想做的事情真的有用。因为你的todolist.add＆＃39;状态控制器不与您的模态（弹出）控制器共享。在你的情况下，＆＃39; todolist.add＆＃39;有一个空控制器，你的模态实例化onEnter使用FormListModalController控制器。

解决方案1：国家参数+解决方案

我通过从两个状态和模态之间的$ scope进行数据复制来解决这个问题：父状态 - ＆gt;儿童状态 - ＆gt;模态

请在下面找到一个示例：

home 是父控制器，并且有一个名为tocopy

home.popup 是打开弹出窗口的子状态

angular.module('test', [ 'ui.bootstrap', 'ui.router' ]); 

angular.module('test').config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider, $stickyStateProvider, $locationProvider) {
        $urlRouterProvider.otherwise("/home");

        $stateProvider
        .state('home', {
            url                 : '/home',
            templateUrl         : './home.html',
            controller          : 'homeController'
        }) 
        .state('home.popup', {
            url                 : '/popup',
            params              : {tocopy: null},
            onEnter: ['$state', '$stateParams', '$uibModal', function ($state, $stateParams, $uibModal) {
                $uibModal.open({
                    templateUrl: './popup.html',
                    controller: 'popupController',
                    resolve: {
                        tocopy: function() {
                            return $stateParams.tocopy;
                        }
                    }
                  }).result.finally(function() {
                        $state.go('^');
                  });
            }]
        }) 
}]);

angular.module('test').controller('homeController', function($scope, $state) {
    $scope.tocopy = "hello";

    $scope.openPopup = function() {
        $state.go('home.popup', { tocopy: $scope.tocopy});
    };

});
angular.module('test').controller('popupController', function($scope, $state, tocopy) {
    $scope.tocopy = tocopy;
});

诀窍是使用：

state params 将变量从州传递到另一个
解决将变量从状态传递到模态控制器

解决方案2：存储服务

如果数据集较大，另一个解决方案可以包括将数据存储在任何控制器都可以访问的服务中。

angular.module('test', [ 'ui.bootstrap', 'ui.router' ]); 

angular.module('test').config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider, $stickyStateProvider, $locationProvider) {
        $urlRouterProvider.otherwise("/home");

        $stateProvider
        /*******************************************************
         * HOME
        *******************************************************/
        .state('home', {
            url                 : '/home',
            templateUrl         : './home.html',
            controller          : 'homeController'
        }) 
        .state('home.popup', {
            url                 : '/popup',
            onEnter: ['$state', '$stateParams', '$uibModal', function ($state, $stateParams, $uibModal) {
                $uibModal.open({
                    templateUrl : './popup.html',
                    controller  : 'popupController',
                    windowClass : 'center-modal'
                }).result.finally(function() {
                    $state.go('^');
                });
            }]
        }) 
}]);

angular.module('test').service('storageService', function () {
        var data;

        return {
            getData: function() { return data; },
            setData: function(value) { data = value; }
        };
});

angular.module('test').controller('homeController', function($scope, $state, storageService) {
    $scope.tocopy = "hello";

    $scope.openPopup = function() {
        storageService.setData($scope.tocopy);
        $state.go('home.popup');
    };

});
angular.module('test').controller('popupController', function($scope, $state, storageService) {
    $scope.tocopy = storageService.getData();
});

示例：

<强>代码：如果你想看一下，我在GitHub中推送了我的例子：https://github.com/gjeanmart/stackexchange/tree/master/43823794

AngularJS：UI路由器模式 - 父范围

1 个答案: