Question

HTML：

<div ng-controller="AccordionCtrl">
    <ul id="myAccordion">
        <li class="bgDark main-tab-animation" ng-repeat="tab in accordionTabs"
            ng-class="{'first-child' : $first, 'trend' : $last}">
            <accordion-content data="tab"></accordion-content>
        </li>
    </ul>
</div>

我的控制器：

angular.module('myApp')
 .controller('AccordionCtrl', function ($scope) {
    $scope.accordionTabs = [{type:'tab'},{type:'tab'},{type: 'tab'},{type:'tab'},{type:'tab'},{type:'tab'},{type:'trend'}];
});

我的指示：

angular.module('myApp')
.directive('accordionContent', function ($compile, $http, $templateCache) {
   var getTemplate = function (contentType) {
       var templateLoader, baseUrl = 'views/',
       templateMap = { tab: 'tab1.html', tab2: 'tab2.html'};
       var templateUrl = baseUrl + templateMap[contentType];
            templateLoader = $http.get(templateUrl, {cache: $templateCache});
      return templateLoader;
   };

    return {
        replace: true,
        restrict: 'E',
        scope: {
            data: '='
        },
        link: function (scope, element, attrs) {
            var loader = getTemplate(scope.data.type);

            var promise = loader.success(function(html) {
                element.html(html);
            }).then(function (response) {
                element.replaceWith($compile(element.html())(scope));
            });

            element.addClass('juhee');
        }
    };
});

在指令Iam中加载2个不同的模板（现在模板是静态html）。

有人可以解释我如何操纵DOM，例如向指令中的重复li元素添加一个类。现在我用ng-class解决了这个问题。但是我想在指令中将其归结为此，例如就像这样....

if(scope.$last){
 element.addClass("trend");
}

但看起来像ng-repeat中的li元素在Iam尝试操作它们时没有渲染...... 日志看起来像这样：

[accordion-content.ng-isolate-scope, ready: function, toString: function, eq: function, push: function, sort: function…]

如何在指令中获取已编译或渲染的元素来操纵它，例如添加删除类或设置CSS ....？

感谢您的时间和帮助！ vladi

AngularJS：获取ng-repeat元素（模板编译）以在指令中操作

0 个答案: