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来显示所有事件。 Insinde 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＆amp; eventId，在属性＆amp;中分配值时，不应使用{{}} cmSingleEvent指令应bindToController: true从isolated scope检索值到控制器this（上下文）

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

指令Angular中的指令

1 个答案: