Javascript 循环遍历angularjs中的嵌套指令

我是angular的新手，尝试做一些指令嵌套，但遇到了一些问题

这是我的密码：

module.controller("TimelineController", ["$scope", "$compile", function ($scope, $compile) {

    $scope.text = "ohoh";
    $scope.elements = ["12", "13"];

    console.log("Timeline Controller", arguments);

}]);

module.directive('timeline', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: true,
        controller : "TimelineController",
        link: function(scope, element, attrs, controller) {
            console.log("linking timeline", arguments);
        },
        templateUrl:'templates/directives/timeline.html',
        replace: true
    };
});

module.directive('timelineEvent', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: true,
        // controller : "TimelineController",
        link: function(scope, element, attrs/*, controller*/) {
            console.log("linking element", arguments);
        },
        templateUrl:'templates/directives/timeline_element.html',
        replace: false
    };
});

我的模板：

timeline.html：

<div class="timeline">
    <p>
        timeline {{text}}
    </p>

    <div ng-repeat="element in elements">
        - event {{element }}
        <timeline-event ng-model="{{element}}"/>
    </div>

</div>

预期的结果当然是：

timeline ohoh

- event 12
timeline element o/ \o
- event 13
timeline element o/ \o

---

为什么ng repeat会成功执行，而嵌套指令调用只执行一次？它不应该在循环中使用指令吗？

三个备注。我不知道这是否是原因（需要在JSFIDLE中进行测试），但它们肯定破坏了某些东西：

• 为什么要设置

  transclude:true

  ？在模板中不使用

  ng transclude

  。您不需要

  transclude:true

• 时间轴上的
  ng模型
  应该是
  元素
  而不是
  {{element}
  

• 您正在使用

  作用域：true

  ，这意味着将创建一个新的作用域。您可能需要定义

  范围

  like（在两个指令上）

因此：

---

@Mark Rajcok请将以下行更改为

<div ng-controlle="TimelineControllerCtrl">

到

---

正在工作。它执行@asgoth建议的操作，只是您不需要创建新的作用域，因此

作用域：

行被注释掉。这个示例有一个输入错误“ng controlle”，但是没有它它它就会中断，太奇怪了！真奇怪。如果绑定控制器，它将不起作用。世界跆拳道联盟！？

timeline ohoh

- event 12
- event 13
timeline element o/ \o

timeline ohoh

- event 12
timeline element o/ \o
- event 13
timeline element o/ \o

scope: {
   element: '&' // provides a way to execute an expression in the context of the parent scope.
}

<div ng-controlle="TimelineControllerCtrl">

<div ng-controller="TimelineController">