AngularJS和JQuery UI选项卡(AngularJS and JQuery UI Tabs)

AngularJS和JQuery UI选项卡(AngularJS and JQuery UI Tabs)

我已经看到一些使用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的新手，但我还没弄清楚如何解决这个问题。

谢谢！

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!

最满意答案

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

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.