1

我是 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
    };
});

我的模板：

时间线.html：

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

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

</div>

时间线元素.html：

<div class="element">
    timeline element o/ \o
</div>

我的 index.html ：

[...]
<body>

    <timeline></timeline>

</body>

和意想不到的结果：

timeline ohoh

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

预期的结果当然是：

timeline ohoh

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

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

4

2 回答 2

3

三注。我不知道这些是否是原因（需要在 jsFiddle 中对其进行测试），但它们肯定会破坏一些东西：

  • 为什么要设置transclude: true？您不在ng-transclude模板中使用。你不需要transclude: true。

  • ng-model你的应该timeline是element而不是{{element}}

  • 您正在使用scope: true，这意味着将创建一个新范围。您可能需要定义您的scope喜欢（在您的两个指令上）。

因此：

scope: {
   element: '&' // provides a way to execute an expression in the context of the parent scope.
}
于 2013-01-09T18:09:14.460 回答
0

@Mark Rajcok 请将以下行更改为

<div ng-controlle="TimelineControllerCtrl">

至

<div ng-controller="TimelineController">
于 2015-09-24T10:25:34.200 回答