AngularJs стрелка прокрутки директива - PullRequest
Новая
       25

AngularJs стрелка прокрутки директива

0 голосов
/ 15 октября 2018

Я недавно начал работать над проектом AngularJs, и я пытаюсь понять, как работают директивы и как их правильно построить.

Моя цель - добавить горизонтальную прокрутку к элементу div, содержащему вкладки, добавивдве кнопки (одна в начале и одна в конце), которые должны отображаться только при наличии прокручиваемого содержимого.Я уже реализовал это непосредственно в своем представлении html, например: 

<md-button class="md-icon-button md-mini width-25 no-margin" style="height: inherit; padding: 0px;" ng-click="vm.onTabScroll('left')" ng-if="vm.canScroll('left') == true">
    <md-icon md-font-icon="icon-chevron-left" class="icon s26"></md-icon>
</md-button>
<div id="bar-container" layout="row" style="overflow:hidden;">
    <div id="tab-container" layout="row" layout-align="start center" style="overflow-x:hidden; overflow-y: hidden; transition: transform .2s ease-in-out;">
        [VARIABLE_CONTENT]
    </div>
</div>
<md-button class="md-icon-button md-mini width-25 no-margin" style="height: inherit; padding: 0px;" ng-click="vm.onTabScroll('right')" ng-if="vm.canScroll('right') == true">
    <md-icon md-font-icon="icon-chevron-right" class="icon s26"></md-icon>
</md-button>

[VARIABLE_CONTENT] содержит вкладки, созданные с помощью ng-repeat: 

<div layout="column" ng-repeat="(key, tab) in vm.tabs" ng-click="vm.onClickTab(tab.id)">
    <div layout="row" layout-align="space-between center">
        <md-icon md-font-icon="{{tab.icon}}" class="icon s16 margin-horizontal-5" ng-class="tab.color + '-fg'"></md-icon>
        <span class="text-truncate font-size-12" ng-class="vm.isActiveTab(tab.id) ? 'black-fg' : 'grey-300-fg'"> {{tab.title}} 
            <span ng-if="tab.badges" class="badge md-white-fg md-red-bg">{{tab.badges}}</span> 
        </span>
        <md-button class="md-icon-button md-mini no-margin" ng-class="vm.isActiveTab(tab.id) ? 'md-primary' : 'grey-300-fg'" aria-label="close" ng-click="vm.closeTab(tab)">
            <md-icon md-font-icon="icon-close-circle-outline" class="icon s16"></md-icon>
        </md-button>
    </div>
    <div style="height: 2px" ng-class="vm.isActiveTab(tab.id) ? tab.color + '-bg' : ''"></div>
</div>

Вся логикаобработано в контроллере представления, но я хотел бы создать директиву, чтобы использовать ее в других местах.

Директива: 

(function() {
    'use strict';

    angular
        .module('app.core')
        .directive('msTabSCroll', msTabSCrollDirective);

    /** @ngInject */
    function msTabSCrollDirective() {
        return {
            restrict: 'EA'
        };
    }
})();

Что я хотел бы понять, так это какскажите директиве, что я хочу, чтобы ее содержимое отображалось внутри div "tab-container".

Кроме того, возможно ли определить шаблон для ng-repeat и внедрить его непосредственно внутри директивы html?И в этом случае, предпочтительнее ли определять его каждый раз вручную?

...