Как добавить директиву, используя TypeScript из шаблона JS? - PullRequest
Новая
       7

Как добавить директиву, используя TypeScript из шаблона JS?

0 голосов
/ 21 февраля 2019

Я хочу добавить кнопку, которая развернет или свернет боковое меню.Он является частью этого шаблона: http://webapplayers.com/inspinia_admin-v2.9.1/ (кнопка с 3 барами) /

их код из шаблона (угловая версия) находится в JS, но мой проект в TS.Я хочу использовать директиву, которая рисует кнопку, и при щелчке сворачивает меню или расширяет его.

Пока что код рисует кнопку, но при нажатии ничего не происходит.я предполагаю, что мне нужно добавить minimalize () в область видимости.Я не уверен, как.

JS: (из шаблона) 

function minimalizaSidebar($timeout) {
    return {
        restrict: 'A',
        template: '<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="" ng-click="minimalize()"><i class="fa fa-bars"></i></a>',
        controller: function ($scope, $element) {
            $scope.minimalize = function () {
                $("body").toggleClass("mini-navbar");
                if (!$('body').hasClass('mini-navbar') || $('body').hasClass('body-small')) {
                    // Hide menu in order to smoothly turn on when maximize menu
                    $('#side-menu').hide();
                    // For smoothly turn on menu
                    setTimeout(
                        function () {
                            $('#side-menu').fadeIn(400);
                        }, 200);
                } else if ($('body').hasClass('fixed-sidebar')){
                    $('#side-menu').hide();
                    setTimeout(
                        function () {
                            $('#side-menu').fadeIn(400);
                        }, 100);
                } else {
                    // Remove all inline style from jquery fadeIn function to reset menu state
                    $('#side-menu').removeAttr('style');
                }
            }
        }
    };
}

TS: 

function Msidebar(): ng.IDirective {
    var directive: ng.IDirective = <ng.IDirective>{};
    directive.priority = 0;
    directive.restrict = "A";
    directive.scope = false;
    directive.template = '<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="" ng-click="minimalize()"><i class="fa fa-bars"></i></a>';
    directive.controller = ($scope, $element) => {
        minimalize:() => {
            $("body").toggleClass("mini-navbar");
            if (!$('body').hasClass('mini-navbar') || $('body').hasClass('body-small')) {
                // Hide menu in order to smoothly turn on when maximize menu
                $('#side-menu').hide();
                // For smoothly turn on menu
                setTimeout(
                    function () {
                        $('#side-menu').fadeIn(400);
                    }, 200);
            } else if ($('body').hasClass('fixed-sidebar')) {
                $('#side-menu').hide();
                setTimeout(
                    function () {
                        $('#side-menu').fadeIn(400);
                    }, 100);
            } else {
                // Remove all inline style from jquery fadeIn function to reset menu state
                $('#side-menu').removeAttr('style');
            }
        }
    };

    return directive;
}
...