Angular - 如何让所有视图共享一个变量（显示在标题中）答案

【问题标题】：Angular - How to have a variable shared by all views (displayed in header)Angular - 如何让所有视图共享一个变量（显示在标题中）
【发布时间】：2017-02-02 17:34:12
【问题描述】：

所以我正在开发一个非常简单的画廊应用程序。我正在使用 MEAN 堆栈。基本上，我有一个列出所有图片的视图和一个上传新图片的视图。在标题中，我想要总图片数。我通过为标题创建一个控制器来做到这一点。它有效，我得到了正确的一切。当我上传新图片时，它会将我重定向到包含所有图片的视图，并且我可以看到添加的新图片。但是，标题中的计数在刷新之前不会改变。如果图片共有 6 张，则当我添加新图片时，计数不会刷新。我怎样才能解决这个问题？我尝试将图片计数保存在我的标题控制器以及我的图片控制器中。这是我的代码：图片控制器：

(() => {
angular.module('gallery').controller('Pictures', ['Picture', function (Picture) {
    let pictures = this;

    Picture.all().success((data) => {
        pictures.pictures = data;
        pictures.pictureCount = data.length;
    });

    }]); 
})();

在此之前我尝试过使用标头控制器。在我的标题 div 中使用了 ng-controller。也没有用。欢迎提出任何建议、解决方案或做法！

【问题讨论】：

在 rootScope 中添加图片计数，然后 rootScope 将在每个控制器中可用。
@AfnanNazir 现在就试试。但是，最好的地方是哪里。据我所知，我应该使用 .run 并传递 $rootScope。在我的文件中哪里是最好的地方？
你是对的，但在你的情况下，它看起来没有必要声明运行。您可以跨控制器更新/添加/访问 rootScope 而无需在运行中声明。就最佳实践而言，除非最后选择，否则不鼓励使用 rootScope。您应该使用服务在控制器之间共享数据。
@AfnanNazir $rootScope 看起来像一个解决方案。虽然我会阅读更多关于使用服务在控制器之间共享数据的内容，因为我想遵循最佳实践。谢谢！

标签： angularjs mean

【解决方案1】：

通过工厂/服务在两个控制器之间共享计数变量。

        angular.module('myModule', [])
            .service('Picture', function () {
                var self = this;
                self.obj = {};
            });

        angular.module('myModule')
        .controller('Pictures', ['Picture', function (Picture) {
                let pictures = this;

                Picture.all().success((data) => {
                    pictures.pictures = data;
                    Picture.obj.pictureCount = data.length;
                });

            }]);

        angular.module('myModule')
        .controller('headerCtrl', ['Picture', function (Picture) {
                let pictures = this;

                pictures.obj = Picture.obj;

            }]);

在标题视图中，您可以简单地使用

<div ng-controller="headerCtrl as header">
    <div> {{header.obj.pictureCount}} </div>
</div>

【讨论】：

【解决方案2】：

你可以使用$rootScope，但不建议像这样污染全局命名空间。更好地实现数据共享服务。

像这样创建另一个模块：

angular.module('utils',[])
    .service('shared', service);

function service(){
    this.data = {};
    return this;
}

然后您可以将此服务注入到您的每个模块中

angular.module(名称, [ 角流星 'ui.router' ,'实用程序' ])

在你的控制器中注入共享，在你的代码中你可以使用

this.shared.data.myVariable = "something"

或

$scope.shared.data.myVariable = "something"

您可以随意使用其他控制器中的内容。

【讨论】：