Javascript AngularJS和JQuery UI选项卡

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

以下是我创建的示例代码：

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>

{{问候语}
表1内容
表2内容
表3内容

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

var-appModule=angular.module（'biApp'，[]）；
appModule.controller（'MyCtrl'，函数（$scope）{
$scope.greeting='Hi！'；
});
指令（'jqueryuitabs'，函数（）{
返回{
限制：'E'，
是的，
模板：“
”，
控制器：功能（$scope）{
log（“jqueryuitabs控制器”）；
$scope.tabs=[]；
this.addTab=函数（tab）{
console.log（'addtab'，Tab'）；
$scope.tabs.push（tab）；
}
},
链接：功能（范围、elm、属性）{
log（'jqueryuitabs链接'）；
var jquerylm=$（elm[0]）；
$（jquerylm.tabs（）；
}
};
});
指令（'jqueryuitab'，函数（）{
返回{
限制：'E'，
要求：“^jqueryuitabs”，
是的，
范围：{
id:“@”，
标题：“@”
},
模板：“”，
链接：函数（范围、元素、属性、tabsCtrl）{
console.log（'Tab link'）；
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>'

模板：'
'

---

请参阅。

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

模板：'
'

---

请参阅。

停止自定义实现并使用。它的效率更高，您可以继续关注更重要的任务

停止自定义实现，只需使用。它效率更高，您可以继续专注于更重要的任务

我认为您最好签出angular ui：我认为您最好签出angular ui：这一个有效，但我必须使用$timeout启动选项卡。如果没有$timeout，它可能无法正常工作。可能是DOM/jQuery尚未完成加载/处理？这一个可以工作，但我必须使用$timeout启动选项卡。如果没有$timeout，它可能无法正常工作。可能是DOM/jQuery尚未完成加载/处理？这是一个很好的选择，但我正在工作的站点不是我的，它们与jQuery ui“结合”在一起，因此对于这种特定情况，这不是一个选项。这不是一个答案，而是一个意见。我相信原始海报的问题是有价值的。这是一个很好的选择，但我正在工作的网站不是我的，他们与jquery ui“结合”在一起，所以对于这个特定的案例，这不是一个选择。这不是一个答案，而是一个意见。我相信原始海报的问题是有价值的。