javascript - 使用 angularJs 包含指令和自定义标签

Question

我正在尝试为网页中的可重用组件制作自定义标签，但我所做的并没有成功，所以我想我错过了一些东西。

我想知道是否有人可以在这里指出我正确的方向。

HTML 名为 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>

js(指令+ Controller )被命名为bottompopulardirective.js并包含在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();
            }

        ]
    };
}

]);

谢谢!

Answer 1

在您的 HTML 中，未使用指令，如您声明为 restrict: 'AE', 那样，您可以在 HTML 中定义为元素或属性。

要用作元素，您可以使用以下内容:

<bottom-popular> 
</bottom-popular>

如果您想用作属性，请按如下方式使用:

<div bottom-popular>
</div>