blob42
/
angularjs-batarang
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

tabs directive now manages lifecycle of controllers

Browse Source
test-unit-sauce
Brian Ford 12 years ago
parent bd61693243
commit aef70efec7
2 changed files with 59 additions and 44 deletions
Show Stats Download Patch File Download Diff File

81
js/directives/tabs.js
Unescape Escape View File

@ -1,25 +1,8 @@
panelApp.directive('batTabs', function() {
panelApp.directive('batTabs', function ($compile, $templateCache, $http) {
return {
restrict: 'E',
transclude: true,
scope: {},
controller: function($scope, $element) {
var panes = $scope.panes = [];
$scope.select = function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
}
this.addPane = function(pane) {
if (panes.length === 0) {
$scope.select(pane);
}
panes.push(pane);
}
},
template:
'<div class="container-fluid">' +
'<div class="row-fluid">' +
@ -29,23 +12,65 @@ panelApp.directive('batTabs', function() {
'</li>' +
'</ul>' +
'</div>' +
'<div class="row-fluid" ng-transclude></div>' +
'<div class="row-fluid bat-tabs-inside"></div>' +
'<div ng-transclude></div>' +
'</div>',
replace: true
replace: true,
controller: function ($scope, $element) {
var panes = $scope.panes = [];
this.addPane = function(pane) {
panes.push(pane);
};
},
link: function (scope, element, attr) {
var lastScope;
var insideElt = angular.element(element[0].getElementsByClassName('bat-tabs-inside')[0]);
function destroyLastScope() {
if (lastScope) {
lastScope.$destroy();
lastScope = null;
}
}
scope.select = function (pane) {
$http.get(pane.src, { cache: $templateCache }).
then(function (response) {
var template = response.data;
insideElt.html(template);
destroyLastScope();
var link = $compile(insideElt.contents());
lastScope = scope.$new();
link(lastScope);
});
angular.forEach(scope.panes, function(pane) {
pane.selected = false;
});
pane.selected = true;
};
scope.select(scope.panes[0]);
}
};
}).
directive('batPane', function() {
return {
require: '^batTabs',
restrict: 'E',
transclude: true,
scope: { title: '@' },
link: function(scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane(scope);
scope: {
title: '@',
src: '@'
},
template:
'<div class="row-fluid" ng-show="selected" ng-transclude>' +
'</div>',
replace: true
link: function (scope, element, attrs, tabsCtrl) {
tabsCtrl.addPane({
title: attrs.title,
src: attrs.src
});
}
};
});

22
panel.html
Unescape Escape View File

@ -40,21 +40,11 @@
</head>
<body>
<bat-tabs>
<bat-pane title="Model">
<ng-include src="'panes/model.html'"></ng-include>
</bat-pane>
<bat-pane title="Performance">
<ng-include src="'panes/perf.html'"></ng-include>
</bat-pane>
<bat-pane title="Dependencies">
<ng-include src="'panes/deps.html'"></ng-include>
</bat-pane>
<bat-pane title="Options">
<ng-include src="'panes/options.html'"></ng-include>
</bat-pane>
<bat-pane title="Help">
<ng-include src="'panes/help.html'"></ng-include>
</bat-pane>
<bat-pane title="Model" src="panes/model.html"></bat-pane>
<bat-pane title="Performance" src="panes/perf.html"></bat-pane>
<bat-pane title="Dependencies" src="panes/deps.html"></bat-pane>
<bat-pane title="Options" src="panes/options.html"></bat-pane>
<bat-pane title="Help" src="panes/help.html"></bat-pane>
</bat-tabs>
</body>
</html>
</html>