Javascript 如何创建一个新指令来编译Angularjs中的其他指令属性？

我正在尝试创建按钮（使用ng repeat），单击按钮时将创建其他按钮，单击这些按钮时将显示我要查找的信息。有人告诉我一个角度指令就可以了。我已经创建了一个自定义指令，并试图将ng repeat指令合并到我的新指令中。我已经研究过这一点，但对于如何最好地实施他的计划，我仍然有些困惑。目前，正在制定新指令，但没有向按钮追加任何文本。在这种情况下，只生成一个按钮，而不是两个。下面是我的代码（HTML和JavaScript）

HTML:

JavaScript:

var annApp = angular.module('anniversaries', []);

annApp.controller('annList', function ($scope) {
  $scope.anns = [
  //January 
    {'date':'January 2015','year': '45', 
    'names': ['Sample Name']},
     {'date':'January 2015','year': '34', 
    'names': ['Sample Name2']}

  ];
});

annApp.directive('yearbuttons',function(){
  return {
    restrict: "E",
    compile: function compile(element, attrs)
    {
      element.attr('ng-repeat', 'years in anns');
      element.attr('class', 'btn btn-default');
      element.append('{{year}} Years');
    }
  }
});

---

我个人根本不会对此使用指令，除非它需要重复使用。但如果它这样做了，只需将模板和控制器粘贴到指令中，就可以轻松地将其转换为指令。指令可以使用控制器而不是链接函数

JavaScript HTML

标签：
点击我！
{{button.label}

我理解您尝试做什么的基本概念，但我认为没有必要在这里做任何花哨的事情。我可能会像您使用视图和控制器那样构建它。如果需要可重用，则使用指令

ng repeat

、

ng hide

、

ng show

、

ng if

、以及

ng switch

应该可以让您在无需处理复杂指令管道的情况下，朝着想要做的事情迈进一大步。如果您决定以后需要重新使用它，只需将模板和控制器放到一个指令中，就可以了。声明模板：{{years}}实际上与您的代码应该做的一样。我正要添加与上面相同的内容。从代码中手动添加所有这些属性是不必要的。使用模板，这将更容易进行推理。如果您不想添加另一层嵌套元素（例如，因为CSS选择器变得太复杂），请在指令定义上使用

replace:true

属性。这不起作用，尤其是如果我在ng click中设置了一个变量。@Balrog30这对我尝试的方向更有意义。我已经做了好几个小时了，没有找到解决办法。我试过了，没有任何运气。我喜欢你所做的。是否有一种方法可以使具有唯一值的唯一按钮与创建其他按钮的标签一起使用。我不能说我需要一个按钮发生器。嗯。。。对您将如何构建它取决于您的总体需求。它需要从服务器加载内容吗？这些值是基于用户输入的，还是仅仅是一组固定值？这些按钮实际上要做什么？需要考虑的所有因素。如果您正在寻找嵌套的JSON对象，您可以构建类似于“选择您自己的冒险”的东西。没有基于用户输入的值。我将JSON对象中的所有数据附加到范围。JSON文件中有年份、月份和名称。单击唯一月份时，应显示该月份的年份。单击年份时，它将显示该年份的名称。

(function(){
  angular.module('myApp', [])
    .controller('BunchOfButtonsController', BunchOfButtonsController);

  BunchOfButtonsController.$inject = ['$scope', '$log'];
  function BunchOfButtonsController($scope, $log){
    $scope.buttons = [];
    $scope.nextLabel = "Some Text";

    $scope.firstButtonClick = function(labelValue){
      $scope.buttons.push({
        label: labelValue,
        click: function(){
          $log.info(labelValue + " was clicked.");
        }
      });
      $scope.nextLabel = "Another " + $scope.nextLabel;
    };
  }
})();

<div ng-app="myApp" ng-controller="BunchOfButtonsController">
  Label: <input type="text" ng-model="nextLabel"/>
  <button ng-click="firstButtonClick(nextLabel)">Click Me!</button>
    <button ng-repeat="button in buttons" ng-click="button.click()">{{button.label}}</button>
</div>