Question

我是一个有角度的新手，试图做一些指令嵌套，但遇到了一些问题。

这是我的代码：

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_element.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执行成功，但嵌套指令调用只执行一次？是不是应该能够在循环中使用指令？

Answer 1

三个评论。我不知道这些是不是原因（需要在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.
}

Answer 2

@Mark Rajcok请将以下行更改为

<div ng-controlle="TimelineControllerCtrl">

到

<div ng-controller="TimelineController">

循环遍历angularjs中的嵌套指令

2 个答案: