AngularJS：UI路由器模式 - 父範圍

我的應用程序中有一個按鈕，用於打開Modal。此模式在UI路由狀態中配置爲使用新網址運行。AngularJS：UI路由器模式 - 父範圍

在Modals Controller中，我需要訪問父$ scope。在父$範圍中，我有一個數組，需要在名爲todolist.add的子狀態中訪問。

爲什麼我需要訪問父$ scope？因爲我想在不調用服務器的情況下操作父$ scope數據。

訪問UI路由器中父範圍的最佳方式是什麼？

// routes 

$stateProvider 
      .state('todolist', { 
       url: '/todo-list', 
       views: { 
        '@': { 
         ..., 
         controller: 'ListsController' 
        } 
       } 
      }) 
      .state('todolist.add', { 
       url: '/list/add', 
       onEnter: ['$state', '$uibModal', function ($state, $uibModal) { 
        $uibModal.open({ 
         ..., 
         controller: 'FormListModalController' // <- in this controller I need to access the $scope from the parent 
        }).result.finally(function() { 
         ... 
        }); 
       }] 
      })...

。

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

來源

2017-05-06 Victor

https://toddmotto.com/all-關於angulars發射廣播發布訂閱我認爲最好的方法之一是廣播一個事件，並在父範圍內收聽。另外考慮用服務操作數據，然後只是廣播事件，讓控制器從服務中獲取數據 – Alburkerk

你試圖做的事情不能真正起作用。因爲你的'todolist.add'狀態控制器不與你的模式（彈出）控制器共享。在你的情況，'todolist.add'有一個空的控制器，你的模式實例onEnter使用FormListModalController控制器。

解決方案1：STATE PARAMS + RESOLVE

我解決了這一點，通過從兩個州和模態之間的$範圍做數據複製：父狀態 - >子狀態 - >模式。

請找一個樣品，其中如下：

家是父控制器有一個名爲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; 
});

訣竅是使用方法：

甲狀態PARAMS從狀態傳遞變量到另一個
決心從狀態傳遞變量到模態控制器

解決方案2：STORAGE SERVICE

在大數據集的情況下，另一種解決方案可以包括將數據存儲在服務中，這將可以被任何控制器訪問。

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

來源

2017-05-06 19:32:06

這是一個很好的解決方案，將巨大的數組傳遞給params？ – Victor

剛剛添加了第二個解決方案。如果數據集龐大，我確實建議將數據存儲在本地的Angular服務中（請參閱解決方案2）。 –

AngularJS：UI路由器模式 - 父範圍

回答

相關問題