Css 修改具有ng repeat with属性集runtime的指令模板的DOM

我必须将css类添加到在ng repeat中创建的dom元素中。只要验证了条件，就必须添加css类。在一个属性上检查该条件，该属性的值根据ng repeat中处理的项目计算

我让你更清楚地看到代码

这是我的指示：

intranet
    .directive('emitLastRepeaterElement', function () {
        return function (scope) {
            if (scope.$last) {
                scope.$emit('LastRepeaterElement');
            }
        };
    })
    .directive('scVerticalMenu', function () {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'Scripts/Angular/Directives/VerticalMenu/verticalMenu.html',
            scope: {
                internalSiteMenu: '=ngModel' //two-way data-binding
            },
            link: function (scope, element, attrs) {
                scope.$on('LastRepeaterElement',
                    function () {
                        //Recupero l'ultimo link del menu interno di livello 2 che non abbia figli
                        //(L'ultimo link non deve avere il bordo nero inferiore)
                        var level2 = element.find("li[role=menuitem]:has(.level2):last");
                        var level3 = element.find("li[role=menuitem]:has(.level3)");
                        if ($(level2).next(level3).length == 0) {
                            $(level2).addClass('last');
                        }
                    });
            }
        }
    });

以下是模板：

<ul class="level1 static" tabindex="0" role="menu" style="position: relative; width: auto; float: left;">
    <li role="menuitem" class="static" style="position: relative;" ng-repeat="menu in internalSiteMenu" emit-last-repeater-element>
        <a class="level{{ menu.Level }} static" href="{{ menu.Url }}" tabindex="-1">{{ menu.Name }}</a>
    </li>
</ul>

我想为每个级别的最后一项添加一个类。因此，在我的示例中，我想在这里添加类：

menu
    item 1
        item 1.2
        item 1.3
        item 1.4 <-- addClass: last of item 1
    item 2
        item 2.1
        item 2.2 <-- addClass: last of item 2
    item 3 <-- addClass: last of menu

菜单
项目1
项目1.2
项目1.3
第1.4项检查小提琴：

只需使用
scVerticalMenu
控制器检测哪些项目是最后一个：

intranet
    .directive('scVerticalMenu', function () {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'Scripts/Angular/Directives/VerticalMenu/verticalMenu.html',
            scope: {
                internalSiteMenu: '=ngModel' //two-way data-binding
            },
            link: function (scope, element, attrs) {
                for (var i = 0; i < scope.internalSiteMenu.length - 1; i++) {
                    if (scope.internalSiteMenu[i].level > scope.internalSiteMenu[i + 1].level) {
                        scope.internalSiteMenu[i].last = true
                    }
                }
                scope.internalSiteMenu[scope.internalSiteMenu.length - 1].last = true
            }
        }
    });

看着我。
范围$last
来自哪里？是否要将最后一个类添加到ng repeat中的最后一个元素？我已更新帖子。我想将该类添加到菜单一级的每一个最后元素中。我有这样做的代码（在
link
函数中的那一个。如果我不使用angularjs，它就可以工作（使用纯jQuery）。但是现在我在一个指令中移动了所有内容，它就不再工作了……它给了我一个错误：
多个指令[scVerticalMenu，ngController]要求在：
Where's
scVerticalMenu
指令？你能分享它的代码和它使用的html代码吗？我已经更新了这个问题。但是，scVerticalMenu是我正在创建的指令，你可以在原始帖子中看到。我更改了答案。事实证明，你不需要控制器，因为整个东西都是指令。只要检查指令中的项目，并检测其中哪一项是最后一项。
<div ng-controller="menuController" ng-init="getMenu">
    <sc-vertical-menu ng-model="siteMenu"></sc-vertical-menu>
</div>

intranet
    .directive('scVerticalMenu', function () {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: 'Scripts/Angular/Directives/VerticalMenu/verticalMenu.html',
            scope: {
                internalSiteMenu: '=ngModel' //two-way data-binding
            },
            link: function (scope, element, attrs) {
                for (var i = 0; i < scope.internalSiteMenu.length - 1; i++) {
                    if (scope.internalSiteMenu[i].level > scope.internalSiteMenu[i + 1].level) {
                        scope.internalSiteMenu[i].last = true
                    }
                }
                scope.internalSiteMenu[scope.internalSiteMenu.length - 1].last = true
            }
        }
    });

<ul class="level1 static" tabindex="0" role="menu" style="position: relative; width: auto; float: left;">
    <li role="menuitem" class="static" ng-class="{'last': menu.last}" style="position: relative;" ng-repeat="menu in internalSiteMenu">
        <a class="level{{ menu.Level }} static" href="{{ menu.Url }}" tabindex="-1">{{ menu.Name }}</a>
    </li>
</ul>