Question

所以我正在开发一个非常简单的图库应用程序。我正在使用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。没有工作。欢迎提出任何建议，解决方案或做法！

Answer 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>

Answer 2

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

创建另一个模块：

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

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

然后，您可以将此服务注入每个模块

angular.module（名字，[ angularMeteor ＆＃39; ui.router＆＃39; ＆＃39; utils的＆＃39; ]）

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

this.shared.data.myVariable = "something"

或

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

您可以根据自己的喜好使用其他控制器。

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

2 个答案: