如何在AngularJS中跨控制器共享数据？_Angularjs

如何在AngularJS中跨控制器共享数据？

angularjs

如何在AngularJS中跨控制器共享数据？,angularjs,Angularjs,我正在做一个使用AngularJS的项目。我已经创建了部分页面，其中每个页面都有自己的、不同的控制器网站结构 /ProjectRoot /css /js angular.js jquery.js /partials login.html page1.html index.html angular .module 'app' .service 'storageService', Storage

我正在做一个使用AngularJS的项目。我已经创建了部分页面，其中每个页面都有自己的、不同的控制器

网站结构

/ProjectRoot
    /css
    /js
        angular.js
        jquery.js


    /partials
        login.html
        page1.html

    index.html

angular
.module 'app'
.service 'storageService', StorageService

class StorageService

    setStorage:(key, value)->
        json =  if value is undefined then null else JSON.stringify value
        sessionStorage.setItem key, json

    getStorage:(key)->
        JSON.parse sessionStorage.getItem key

    userToken:(value=null)->
        if value is null
            @getStorage 'userToken'
        else
            @setStorage 'userToken', value

index.html

<!DOCTYPE html>
<html ng-app="demoapp" >
<head>
    scripts
</head>
<body ng-controller="maincontroller">   
     <ng-view></ng-view>
</body>
</html>

<div class="main-page" ng-controller="logincontroller">
    --code---
</div>


剧本

login.html

<!DOCTYPE html>
<html ng-app="demoapp" >
<head>
    scripts
</head>
<body ng-controller="maincontroller">   
     <ng-view></ng-view>
</body>
</html>

<div class="main-page" ng-controller="logincontroller">
    --code---
</div>


--代码---

因此，完整登录页面呈现为：

<!DOCTYPE html>
    <html ng-app="demoapp" >
    <head>
        scripts
    </head>
    <body ng-controller="maincontroller">   
         <div class="main-page" ng-controller="logincontroller">
            --code---
         </div>
    </body>
    </html>


剧本
--代码---

我需要在控制器之间共享数据。我尝试使用

$scope.$parent.variablename

但是当我刷新

page1.html

时，它包含一个空值

我的问题是：

如何创建可以在整个项目中使用的全局变量，即所有部分页面及其控制器（可能是

$rootScope

）

使用缓存是否是更好的选择？（安全问题）

要在控制器之间共享状态，应使用角度服务。服务易于定义和使用（见下面的示例），而且由于它们是单例，所以它们是存储共享状态信息的好地方。不需要缓存或任何复杂的东西

但是你还说：

我尝试使用

$scope.$parent.variablename

但刷新时

page1.html

它包含一个空值

刷新Angular应用程序总是一个问题

这是因为典型的Angular应用程序是单页应用程序（SPA）。您的状态信息仅在应用程序的生命周期内持续存在，对于SPA，这是页面的生命周期。因此，如果刷新页面，则重新启动应用程序，所有状态信息都将丢失

要解决此问题，您可以使用。这项技术非常有用，允许您在页面刷新之间持久保存状态数据。这在Angular应用程序中尤其重要，因为它们应该始终优雅地支持用户刷新页面（包括单击后退和前进按钮）

您可以将所有这些结合到一个简单的服务中，将其数据持久化到

会话存储中。这将为您提供在控制器之间共享并在页面刷新之间持久化的状态数据
下面是一个存储名为userToken
的状态数据的示例（在coffeescript中）：
服务
/ProjectRoot
    /css
    /js
        angular.js
        jquery.js


    /partials
        login.html
        page1.html

    index.html

angular
.module 'app'
.service 'storageService', StorageService

class StorageService

    setStorage:(key, value)->
        json =  if value is undefined then null else JSON.stringify value
        sessionStorage.setItem key, json

    getStorage:(key)->
        JSON.parse sessionStorage.getItem key

    userToken:(value=null)->
        if value is null
            @getStorage 'userToken'
        else
            @setStorage 'userToken', value

您可以向该服务添加任意数量的数据值，甚至可以存储复杂对象
一旦定义了服务，您就可以使用Angular的依赖项注入来轻松地获取服务实例。下面是几个示例控制器，它们显示了正在注入和使用的storageService
：
控制器
angular
.module 'app'

.controller 'logincontroller', ($scope, storageService)->
    $scope.setUserToken = (token)-> storageService.userToken(token)

.controller 'maincontroller', ($scope, storageService)->
    $scope.userToken = storageService.userToken()