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

I am using Angular 1.5.7 and am trying to see if I can push the value of an attribute within a directive used on several different pages to an array that lives in the controller.

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

I am pretty sure that I need to used transclusion in order to do this but I am stuck. Below is a simplified version of what I have so far:

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

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)

I am able to get the value of the mypage attribute in the directive as well as its transcluded <div> to appear in the header but only for the current page in view.

我能够在指令中获取mypage属性的值以及它的transcluded

以显示在标题中,但仅用于视图中的当前页面。

The part I am missing is how to get all of the mypage values from each page into the header regardless of the current page in view. I am somewhat new to Angular and have read a lot but have not come across anything that explains how this can be done. Maybe this is achieved with a service? If so, I'm not sure how to go about it.

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

To clarify with a visual. This is what I see:

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

But this is what I want to see:

但这就是我想要看到的:

2 个解决方案

#1

As you rightly pointed out, there are several ways to do it.

正如你正确指出的那样,有几种方法可以做到这一点。

Perhaps you can pass the array from the MainCtrl as an attribute to the directive. For instance, nav-array="nav". However, before that, you need to set the array nav as such

也许你可以将数组从MainCtrl作为属性传递给指令。例如,nav-array =“nav”。但是,在此之前,您需要设置数组nav

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

The second option is to consume a service. Create an angular service, pass it as a dependency in the directive, and consume it.

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

#2

Lets create an array in MainCtrl as $scope.headers = ['about':'About','contact':'Contact','home':'Home'] or create a factory/service to share the headers data and in header.html use ng-repeat to display the header name according to myPage value like below

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

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

#1