如何使用带有 DevExpress dx-tabs 的 AngularJS 方法将我的选项卡绑定到 tabContent答案

【问题标题】：How to bind my tab to tabContent using AngularJS approach with DevExpress dx-tabs如何使用带有 DevExpress dx-tabs 的 AngularJS 方法将我的选项卡绑定到 tabContent
【发布时间】：2015-08-27 18:48:59
【问题描述】：

我创建了使用自定义指令在视图中动态加载的 dx 选项卡。我能够输出选项卡，但我无法弄清楚如何将相应的选项卡窗格与选项卡绑定。我正在考虑在 addTab 函数中的 ji-Tabset 指令内部，我需要以某种方式创建一个变量，该变量将遍历我的 scope.tabs 数组，然后为每个整数创建该变量的实例。然后在我的 ji-tab 指令中，我需要将文本和内容都推送到 scope.tabs 数组。有什么想法吗？

指令 1 - Ji-Tabset

module FormTest {
    angular
        .module('FormTest') //Gets the FormTest Module
        .directive('jiTabset', function () {
            return {
                restrict: 'E',
                transclude: true,
                scope: {},
                controller: function ($scope) {
                    var tabs = $scope.tabs = [];

                    $scope.select = function (args) {
                        var tab = args.itemData;
                        angular.forEach(tabs, function (tab) {
                            tab.selected = false;
                        });
                        tab.selected = true;
                    };

                    $scope.tabSettings = {
                        bindingOptions: { items: "tabs" },
                        onItemClick: $scope.select
                    }

                    this.addTab = function (tab) {
                        tabs.push(tab);
                    };
                },
                templateUrl: "FormTest/views/ji-Tabset.html",
            };
        });
}

指令 2 - Ji-Tab

module FormTest {
        angular
            .module('FormTest') //Gets the FormTest Module
            .directive('jiTab', function () {
                return {
                    require: '^jiTabset',
                    restrict: 'E',
                    transclude: true,
                    scope: {},
                    templateUrl: 'FormTest/views/ji-Tab.html',
                    link: function (scope, element, attrs, tabsCtrl) {
                        scope.text = attrs.tabName;
                        tabsCtrl.addTab(scope);
                    }
                };
            });
}

Ji-Tabset templateUrl

<div dx-tabs='tabSettings'></div><div ng-transclude></div>

Ji-Tab templateUrl

<div ng-show="selected" ng-transclude></div>

主视图

<ji-tabset name="Tabs" label="testing">
    <ji-tab tab-name="General">
        <ji-button label="Button 1"></ji-button>
    </ji-tab>
    <ji-tab tab-name="Stats"></ji-tab>
    <ji-tab tab-name="Stuff"></ji-tab>
    <ji-tab tab-name="Other"></ji-tab>
    <ji-tab tab-name="More stuff"></ji-tab>
</ji-tabset>

【问题讨论】：

标签： angularjs devexpress

【解决方案1】：

万一有人遇到这种情况，我能够找出解决方案。

我必须对我的指令进行一些更改并使用 DevExpress 的 onItemClick 事件处理程序 itemData。我必须为 ji-tab 指令添加一个视图并将其中的所有内容都包含在内。并且还使用 angular.foreach 循环遍历我的选项卡数组。我已经用正确的解决方案更新了原始帖子。

【讨论】：