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

问题描述

我看过一些使用 AngularJS 的选项卡示例，很少看到使用 AngularJS 的 JQueryUI 选项卡，所以我尝试创建两个指令来创建选项卡容器和选项卡项.

这是我创建的示例代码:http://jsfiddle.net/davidzapata/tvq6w1g9/2/

HTML

<div ng-controller="MyCtrl"><h1>{{问候}}</h1><jqueryuitabs><jqueryuitab id="tab1" title="Tab 1">Tab 1内容</jqueryuitab><jqueryuitab id="tab2" title="Tab 2">Tab 2内容</jqueryuitab><jqueryuitab id="tab3" title="Tab 3">Tab 3内容</jqueryuitab></jqueryuitabs>

JS

var appModule = angular.module('biApp', []);appModule.controller('MyCtrl', function($scope){$scope.greeting = '嗨！';});appModule.directive('jqueryuitabs', function () {返回 {限制:'E'，转置:真实，模板:'<div><ul><li ng-repeat="tab in tabs"><a href="#{{tab.id}}">{{tab.title}}<;/a></li></ul><ng-transclude></ng-transclude></div>',控制器:功能($范围){console.log('jqueryuitabs 控制器');$scope.tabs = [];this.addTab = 函数(标签){console.log('添加标签', tab);$scope.tabs.push(tab);}},链接:函数(范围，榆树，属性){console.log('jqueryuitabs 链接');var jqueryElm = $(elm[0]);$(jqueryElm).tabs();}};});appModule.directive('jqueryuitab', function () {返回 {限制:'E'，要求:'^jqueryuitabs'，转置:真实，范围: {ID: "@"，标题: "@"},模板:'<div id="{{id}}" ng-transclude></div>',链接:函数(范围、元素、属性、tabsCtrl){console.log('标签链接');tabsCtrl.addTab(范围)；}};});

我之前从未在 jsfiddle.net 中创建过代码，但该代码似乎加载了所需的库.即便如此，控制器工作，问候"模型呈现，但选项卡不工作，他们甚至没有将内容转换为相应的元素.

当然，我是一个 AngularJS 新手，但我还没有想出如何解决这个问题.

谢谢！

解决方案

在 jqueryuitabs 指令中的 div 上使用 ng-transclude:

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

参见 jsfiddle.

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.

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);
        }
    };
});

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.

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

Thanks you!

解决方案

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

See jsfiddle.

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