javascript - 指令 Angular 中的指令

Question

我是 AngularJS 的新手，我正在尝试创建其中包含另一个指令的指令。

这是第一个指令的样子

(

function () {
    app.directive("cmEventBar", function () {

        var controller = function () {
            var vm = this;
            vm.events = [
                {name: "Truckdriver1", eventId: 1 },
                {name: "Truckdriver2", eventId: 1 },
                {name: "Truckdriver3", eventId: 1 }
            ];
        }

        return {
            templateUrl: "app/shared/eventsBar/eventBar.html",
            restrict: "E",
            controller: controller,
            priority: 1000,
            terminal: true,
            controllerAs: "vm",
            scope: {}
        };
    });
})();

在该指令的 html 中，我使用 ng-repeat 来显示所有事件。在 ng-repeat 中我还有另一个指令:

<div ng-repeat="item in vm.events">
            <cm-single-event name="{{item.name}}" eventId="{{item.eventId}}"></cm-single-event>
        </div>

这是第二个指令的样子:

(function () {
    app.directive("cmSingleEvent", function () {

        var controller = function () {
            var vm = this;
            vm.info = switchEvent(eventId);
         }

        return {
            template: "<li class={{vm.info.itemClass}}> {{vm.name}} {{vm.info.messege}} </li>",
            restrict: "E",
            controller: controller,
            controllerAs: "vm",
            scope: {
                name: "=",
                eventId: "="
            }
        };
    });
})();

输出有点奇怪，因为事件有 3 个元素，而在输出中我只看到一个元素 + 里面没有指令中的 vm.info。

输出

{{vm.name}} {{vm.info.messege}}

我在这里做错了什么？

提前致谢!

Answer 1

由于您使用 = 表示 name 和 eventId，因此不应在以下情况下使用 {{}}:在属性和 cmSingleEvent 指令中分配值应该具有 bindToController: true 以便从isolated range 检索值到 Controller this (上下文)

<cm-single-event name="item.name" event-id="item.eventId"></cm-single-event>