Include a directive and custom tag using angularJs

Question

I am trying to make a custom tag for a reusable component in a web page but what I did, did not work, so I guess I am missing something.

I wonder if anyone can point me in the right direction here.

the HTML is named bottom-popular.html

<div class="bottom-popular">
          <!-- Mas populares -->
            <div id="pops" class="container-fluid">
              <div class="container">
                <div class="boxtitle">
                  <h1>Más populares</h1>
                  <div class="bar-grey gradientBar"></div>
                </div>
                <ul class="slider-evento ul-pop-events-slider-bottom"></ul>  
              </div>
            </div>
        </div>

And the js (directive + controller) is named bottompopulardirective.js and is include in the index.html

angular.module('app').directive('bottomPopular', ['$scope','CONSTANTS', 'BaEventService', 'SharedServices', 'SecurityService', 
function($scope, CONSTANTS, BaEventService, SharedServices, SecurityService) 
{
    return {
        restrict: 'AE',
        templateUrl: 'bottom-popular.html',
        controller: ['$scope','CONSTANTS', 'BaEventService', 'SharedServices', 'SecurityService', 
            function($scope, CONSTANTS, BaEventService, SharedServices, SecurityService){
                $scope.host = CONSTANTS.host + "/gallery/";

                $scope.isLoggedIn = function(){
                    return SecurityService.isLoggedIn();
                };

                $scope.login = function(){
                    SecurityService.login();
                };

                var initSlick = function(){
                    $('.ul-pop-events-slider-bottom').slick();
                };

                var init = function(){
                    $scope.mostPopularSaved = JSON.parse(localStorage.getItem('popEvents'));
                    $($scope.mostPopularSaved).each(function () {
                        var event = this;
                        $(event["images"]).each(function () {
                            if (this["pivot"]["prinpal"] == "true") {
                                var imgUrl = $scope.host + "700_300/" + this["file_name"];
                                var linkToEvent = SecurityService.getUrlEvent(event["id"], event["name"]);
                                var date = SharedServices.getEventDates(event);
                                $scope.eventCancelled = false;
                                $scope.eventPaused = false;
                                $scope.dateCancelled = false;
                                $scope.datePaused = false;
                                $scope.eventRealizationCancelled = 0;
                                $scope.eventRealizationPaused = 0;
                                if(event.cancelled == '1'){
                                    $scope.eventCancelled = true;
                                }
                                if(event.paused == '1'){
                                    $scope.eventPaused = true;
                                }

                                $(event.events_program).each(function(){
                                    $(this.events_realiz_cancelled).each(function(){
                                        $scope.eventRealizationCancelled++;
                                    });
                                    $(this.events_realiz_paused).each(function(){
                                        $scope.eventRealizationPaused++;
                                    });
                                });
                                if($scope.eventRealizationCancelled > 0){
                                    $scope.dateCancelled = true;
                                }
                                if($scope.eventRealizationPaused > 0){
                                    $scope.datePaused = true;
                                }

                                var liSlider = $('<li><div ng-show="isLoggedIn()">' +
                                        '<button class="icontofav btn-null unfav-btn" ng-show="!'+event.event_added_to_favorites+'" ng-click="markAsFav($event, '+event.id+')"></button>' +
                                        '<button class="icontofav btn-active fav-btn" ng-show="'+event.event_added_to_favorites+'" ng-click="unmarkAsFav($event, '+event.id+')"></button>' +
                                        '</div>' +
                                        '<div ng-hide="isLoggedIn()">' +
                                        '<button class="icontofav btn-null unfav-btn" ng-click="login()"></button>' +
                                        '</div>' +
                                        '<div class="ng-hide added-to-favorites" style="z-index: 9999;position: absolute;top: 50px;background: whitesmoke;margin-left: 15px;">Añadido a Mis Favoritos</div>' +
                                        '<a href="' + linkToEvent + '">' +
                                        '<div class="img-event" style="background-image: url(' + imgUrl + ')">' +
                                        '<div class="msg" ng-show="'+$scope.eventCancelled+'">¡El evento está cancelado!</div>' +
                                        '<div class="msg" ng-show="'+!$scope.eventCancelled+' && '+$scope.eventPaused+'">¡El evento está pausado!</div>' +
                                        '<div class="msg" ng-show="'+!$scope.eventCancelled+' && '+!$scope.eventPaused+' && '+$scope.dateCancelled+' && '+($scope.eventRealizationCancelled === 1) +'">¡Hay una fecha cancelada!</div>' +
                                        '<div class="msg" ng-show="'+!$scope.eventCancelled+' && '+!$scope.eventPaused+' && '+$scope.dateCancelled+' && '+($scope.eventRealizationCancelled > 1) +'">¡Hay fechas cancelada!</div>' +
                                        '<div class="msg" ng-show="'+!$scope.eventCancelled+' && '+!$scope.eventPaused+' && '+!$scope.dateCancelled+' && '+$scope.datePaused+' && '+($scope.eventRealizationPaused === 1)+'">¡Hay una fecha pausada!</div>' +
                                        '<div class="msg" ng-show="'+!$scope.eventCancelled+' && '+!$scope.eventPaused+' && '+!$scope.dateCancelled+' && '+$scope.datePaused+' && '+($scope.eventRealizationPaused > 1)+'">¡Hay fechas pausada!</div>' + 
                                        '</div>' +
                                        '<h3 class="fecha" style="background-color: #' + event["axis"][0]["color"] + '">' + date + '</h3>' +
                                        '<div class="contenido-evento">' +
                                        '<h3 class="titulo-event" style="color: #' + event["axis"][0]["color"] + '">' + event["name"] + '</h3>' +
                                        '<p class="descripcion-evento">' + strip_html_tags(event["summary"]) + '</p>' +
                                        '<a href="' + linkToEvent + '" class="vermas">Ver más</a>' +
                                        '</div>' +
                                        '</div>' +
                                        '</a></li>');
                                $('.ul-pop-events-slider-bottom').append(liSlider);
                                $compile(liSlider)($scope);
                            }
                        });
                    });
                    initSlick();
                };

              init();
            }

        ]
    };
}

]);

Thanks!

I. Ahmed · Accepted Answer · 2018-03-12 02:12:27Z

1

In your HTML directive is not used, as you declared as restrict: 'AE', so you can define in HTML as element or an attribute.

For using as element you can use as the following:

<bottom-popular> 
</bottom-popular>

If you want to use as attribute, then use like follows:

<div bottom-popular>
</div>

answered Mar 12, 2018 at 2:12

I. Ahmed

2,5261 gold badge14 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3074989 Over a year ago

right, also I had the template called directly and I forgot it was in a 'views' folder, so, with that and, the templateUrl: '/views/bottom-popular.html' I have fixed the issue. Thanks!

Collectives™ on Stack Overflow

Include a directive and custom tag using angularJs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related