AngularJS和JQuery UI选项卡 [英] AngularJS and JQuery UI Tabs

问题描述

我见过的标签部分样品AngularJS，以及有关jQueryUI的卡口与AngularJS很少，所以我试图创建两个指令，以创建标签的容器和标签项目。

I've seen some samples of tabs with AngularJS, and very few about JQueryUI tabs with AngularJS, so I tried to create two directives to create the tabs container, and the tab items.

下面是示例code我创建： http://jsfiddle.net/ davidzapata / tvq6w1g9 / 2 /

Here is the sample code I've created: http://jsfiddle.net/davidzapata/tvq6w1g9/2/

HTML

<div ng-app="biApp">
    <div ng-controller="MyCtrl">
        <h1>{{greeting}}</h1>
        <jqueryuitabs>
            <jqueryuitab id="tab1" title="Tab 1">Tab 1 content</jqueryuitab>
            <jqueryuitab id="tab2" title="Tab 2">Tab 2 content</jqueryuitab>
            <jqueryuitab id="tab3" title="Tab 3">Tab 3 content</jqueryuitab>
        </jqueryuitabs>
    </div>
</div>

JS

var appModule = angular.module('biApp', []);

appModule.controller('MyCtrl', function($scope){
    $scope.greeting = 'Hi!';
});

appModule.directive('jqueryuitabs', function () {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div><ul><li ng-repeat="tab in tabs"><a href="#{{tab.id}}">{{tab.title}}</a></li></ul><ng-transclude></ng-transclude></div>',
        controller: function($scope) {
            console.log('jqueryuitabs Controller');
            $scope.tabs = [];

            this.addTab = function(tab){
                console.log('Add Tab', tab);
                $scope.tabs.push(tab);
            }
        },
        link: function(scope, elm, attrs) {
            console.log('jqueryuitabs link');
            var jqueryElm = $(elm[0]);
            $(jqueryElm).tabs();
        }
    };
});

appModule.directive('jqueryuitab', function () {
    return {
        restrict: 'E',
        require: '^jqueryuitabs',
        transclude: true,
        scope: {
            id: "@",
            title: "@"
        },
        template: '<div id="{{id}}" ng-transclude></div>',
        link: function (scope, element, attrs, tabsCtrl) {
            console.log('Tab link');

            tabsCtrl.addTab(scope);
        }
    };
});

我从来没有在jsfiddle.net创建code之前，但code似乎加载所需的库。即使如此，控制器工作时，问候模型被呈现，但标签不工作，并且它们不连transcluding内容到相应的元件。

I've never created code before in jsfiddle.net, but that code seems to load the required libraries. Even so, the controller works, the "greeting" model is rendered, but the tabs are not working, and they are not even transcluding the content into the respective elements.

当然，我是一个使用AngularJS新的，但我还没有想出如何解决这个问题。

Of course, I'm an new using AngularJS, but I haven't figured out how to solve this problem.

谢谢你！

推荐答案

使用 NG-transclude 上一个div在你的 jqueryuitabs 的指令：

Use the ng-transclude on a div in your jqueryuitabs directive:

template: '<div><ul><li ng-repeat="tab in tabs"><a href="#{{tab.id}}">{{tab.title}}</a></li></ul><div ng-transclude></div></div>'

请参阅的jsfiddle 。

这篇关于AngularJS和JQuery UI选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！