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 { return {
restrict: 'E', restrict: 'E',
transclude: true, transclude: true,
scope: {}, 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: template:
'<div class="container-fluid">' + '<div class="container-fluid">' +
'<div class="row-fluid">' + '<div class="row-fluid">' +
@ -29,23 +12,65 @@ panelApp.directive('batTabs', function() {
'</li>' + '</li>' +
'</ul>' + '</ul>' +
'</div>' + '</div>' +
'<div class="row-fluid" ng-transclude></div>' + '<div class="row-fluid bat-tabs-inside"></div>' +
'<div ng-transclude></div>' +
'</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() { directive('batPane', function() {
return { return {
require: '^batTabs', require: '^batTabs',
restrict: 'E', restrict: 'E',
transclude: true, scope: {
scope: { title: '@' }, title: '@',
link: function(scope, element, attrs, tabsCtrl) { src: '@'
tabsCtrl.addPane(scope);
}, },
template: link: function (scope, element, attrs, tabsCtrl) {
'<div class="row-fluid" ng-show="selected" ng-transclude>' + tabsCtrl.addPane({
'</div>', title: attrs.title,
replace: true src: attrs.src
});
}
}; };
}); });

22
panel.html
Unescape Escape View File

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