我已经看到了一些使用 AngularJS 的选项卡示例，而很少看到使用 AngularJS 的 JQueryUI 选项卡，因此我尝试创建两个指令来创建选项卡容器和选项卡项。
这是我创建的示例代码：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 中创建过代码，但该代码似乎加载了所需的库。即便如此，控制器工作，“问候”模型被渲染，但选项卡不起作用，它们甚至没有将内容嵌入到相应的元素中。
当然，我是一个使用AngularJS的新手，但我还没有想出如何解决这个问题。
谢谢！