AngularJS: Получение элемента ng-repeat (шаблон скомпилирован) для манипулирования в директиве

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");
}

но похоже, что элементы li из ng-repeat не отображаются в тот момент, когда Iam пытается ими манипулировать... Журнал выглядит так:

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

Как я могу получить скомпилированный или визуализированный элемент в Директиве, чтобы манипулировать им, например, добавив удаление классов или установив css ....?

Спасибо за ваше время и помощь! Влади

0 ответов

Другие вопросы по тегам