0

我想用 Angular 创建一个选项卡界面，我选择angular-ui-bootstrap了选项卡。我TabController用<tabset>里面装了一个。我创建了一个TabService作为选项卡的来源。

我在标签上创建了一个包含门票列表的标签（这部分效果很好），我现在想通过单击列表中的项目来打开一个新标签。控制器应该做一些事情，然后在里面创建一个带有工单详细视图的新选项卡

选项卡服务

angular.module('vendor.services').factory('TabService', [ '$q', function ($q) {
    'use strict';

    var tabs = [
        {
            title: "Tab Title",
            icon: "glyphicon-user",
            content: '<ticket-list></ticket-list>',
            closable: false
        }
    ];

    function getTabs() {
        var deferred = $q.defer();
        deferred.resolve(tabs);
        return deferred.promise;
    }

    function addTab(tab) {
        var deferred = $q.defer();
        tabs.push(tab);
        return deferred.promise;
    }

    return {
        getTabs : getTabs,
        addTab : addTab
    };

}]);

控制器

angular.module('vendor').controller('TabController', ['$scope', 'TabService', function ($scope, TabService) {
    'use strict';

    TabService.getTabs().then(function (tabs) {
        $scope.tabs = tabs;
    });

    $scope.addTab = function(type, index) {

        var tab = {
            title: "Tab Title",
            icon: "glyphicon-user",
            content: '<ticket>',
            closable: true
        };

        TabService.addTab(tab);
    };

}]);

模板（玉）

.col-lg-12.tabs(ng-controller="TabController")
    tabset
        tab(ng-repeat="tab in tabs")
            tab-heading
                span.glyphicon(ng-class="tab.icon", ng-show="tab.icon")
                span(compile="tab.title")
                a(ng-click="removeTab($index)", href='', ng-show="tab.closable")
                    i.close &times;
            .tab-content(compile="tab.content")

指示

angular.module('vendor.directives').
    directive('ticketList',[ function () {
        'use strict';

        function ticketCtrl ($scope, TicketService) {

            TicketService.getTickets().then(function(tickets) {
                $scope.tickets = tickets;
            });

            $scope.openTicket = function(id) {
                $scope.addTab("ticket", id);
            };

        }

        return {

            restrict: 'E',

            controller: ['$scope', 'TicketService', function($scope, TicketService) {
                return ticketCtrl($scope, TicketService);
            }],

            templateUrl : "directives/ticketList.html",

            scope : {
                ngModel: '='
            },

            require: '?^TabController',

            link: function () {
            }
        };


    }]);

在选项卡中，我编译了一些指令，例如项目列表。我现在希望能够调用addTabTabController 上的函数。我试图这样做，require: '?^TabController'但它无法解析控制器。

我想当 angular-ui 创建一个孤立的范围时会有一些问题，但也许我只是遗漏了一些东西。我刚开始使用指令，我想在指令中要求 TabService，但这会使我的 TabController 有点无用，因为它不是 TabService 的责任。

4

1 回答 1

1

您可以使用控制器使 TabController 成为指令：

.directive('tabset', function() {
    return {
        controller: function() {}
    };
}

然后在 ticketList 中要求它并将其传递给链接函数

require: '^tabset',
link: function(scope, element, attrs, tabsetCtrl) {
    // you can use tabsetCtrl here
}

观看 Egghead 关于指令通信的讲座http://egghead.io/lessons/angularjs-directive-communication

于 2013-11-14T10:40:13.487 回答