如何从Angular JS中不同页面上的同一指令的值创建数组？

Question

我正在使用Angular 1.5.7并试图查看是否可以将在几个不同页面上使用的指令中的属性值推送到控制器中的数组。

我很确定我需要使用翻译才能做到这一点，但我被卡住了。以下是我到目前为止的简化版本：

about.html

<div ng-controller="MainCtrl as ctrl"
  <div cd-header mypage="About">
    <div>About Page</div>
  </div>
</div>

contact.html

<div ng-controller="MainCtrl as ctrl"
  <div cd-header mypage="Contact">
    <div>Contact Page</div>
  </div>
</div>

header.html中

<div>{{mypage}}
  <div ng-transclude></div>
</div>

CD-header.js

var cdHeader = function() {
  return {
    scope: {
      mypage: "@"
    },
    transclude: true,
    templateUrl: 'header.html',
    link: function(scope) {
      // Not sure but I think I might need a function here
    }
  }
}

module.exports = cdHeader;

MainCtrl.js

var MainCtrl = function($scope) {
  var nav = [];
  // Not sure how items that are pushed to the nav get to this point
}

module.exports = MainCtrl;

main.js

var app = angular.module("myapp", [
  'about',
  'contact',
])
  .controller('MainCtrl', MainCtrl)
  .directive('cdHeader', cdHeader)

我能够获得指令中mypage属性的值以及它的转换<div>以显示在标题中，但仅适用于视图中的当前页面。

我缺少的部分是如何将每个页面中的所有mypage值都放入标题中，而不管视图中的当前页面如何。我对Angular有点新，并且已经阅读了很多但没有遇到任何解释如何做到的事情。也许这是通过服务实现的？如果是这样，我不知道该怎么做。

用视觉澄清。这就是我所看到的：

但这是我想看到的：

Answer 1

正如你正确指出的，有几种方法可以做到。

也许您可以将数组从MainCtrl作为属性传递给指令。例如，nav-array =＆＃34; nav＆＃34;。但是，在此之前，您需要将数组导航设置为

var $scope = this;
this.nav = [];

第二种选择是使用服务。创建一个角度服务，将其作为指令中的依赖项传递，然后使用它。

Answer 2

让我们在MainCtrl创建一个数组作为$scope.headers = ['about':'About','contact':'Contact','home':'Home']或创建工厂/服务来共享标题数据，并在header.html中使用ng-repeat根据myPage值显示标题名称，如下所示

<div ng-repeat="page in headers[myPage]">{{page}}
  <div ng-transclude></div>
</div>