Question

我最近开始着手AngularJs项目，我正试图了解指令的工作方式以及如何正确构建指令。

我的目标是通过添加两个仅在有要滚动的内容时才需要显示的按钮（一个在开头，一个在结尾）来向包含选项卡的div添加水平滚动。我已经直接在html视图中实现了它，如下所示：

<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>

[VARIABLE_CONTENT]包含通过ng-repeat生成的标签：

(function() {
    'use strict';

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

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

所有逻辑都在视图的控制器中处理，但是我想创建一个指令以便在其他地方重用它。

指令：

classpath { 'com.android.tools.build:gradle:3.2.1'
classpath {'com.google.gms:google-services:3.2.0'}

我想了解的是如何告诉指令我希望其内容显示在“ tab-container” div中。

还可以为ng-repeat定义模板并将其直接注入html指令中吗？在这种情况下，是否比每次手动定义它更可取？

AngularJs箭头滚动指令

0 个答案: