Skip to content

Commit

Permalink
Added ability to enable/disable the directive via scope variable to fix
Browse files Browse the repository at this point in the history 
#8
  • Loading branch information
@brandon-barker
brandon-barker committed Oct 25, 2015
1 parent 2fba209 commit 2b1b01f
Show file tree
Hide file tree
Showing 3 changed files with 232 additions and 42 deletions.
97 changes: 56 additions & 41 deletions angular-floatThead.js
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,65 @@
/**
* floatThead wrapper for AngularJS
* @version v0.0.1 - 2014-08-19
* @link https://github.com/brandon-barker/ng-floatThead
* @version v0.1.0 - 2015-10-25
* @link https://github.com/brandon-barker/angular-floatThead
* @author Brandon Barker
* @license MIT License, http://www.opensource.org/licenses/MIT
*/
(function () {
'use strict';

angular
.module('floatThead', [])
.directive('floatThead', ['$timeout', '$log', floatThead]);

function floatThead ($timeout, $log) {
// Usage:
// Specify float-thead on any table element and optionally pass through a floatThead options object to initialize the library.
// Optionally specify ng-model to have the directive watch any objects for changes and call 'reflow' on floatThead.
// You can also manually trigger a reflow by triggering an event on the table element called 'update', eg: jQuery('.table').trigger('update');
var directive = {
require: '?ngModel',
link: link,
restrict: 'A'
};
return directive;

function link(scope, element, attrs, ngModel) {
jQuery(element).floatThead(scope.$eval(attrs.floatThead));

if (ngModel) {
// Set $watch to do a deep watch on the ngModel (collection) by specifying true as a 3rd parameter
scope.$watch(attrs.ngModel, function () {
jQuery(element).floatThead('reflow');
}, true);
} else {
$log.info('floatThead: ngModel not provided!');
}

element.bind('update', function () {
$timeout(function() {
jQuery(element).floatThead('reflow');
}, 0);
});

element.bind('$destroy', function() {
jQuery(element).floatThead('destroy');
});
'use strict';

angular
.module('floatThead', [])
.directive('floatThead', ['$timeout', '$log', floatThead]);

function floatThead($timeout, $log) {
// Usage:
// Specify float-thead on any table element and optionally pass through a floatThead options object to initialize the library.
// Optionally specify ng-model to have the directive watch any objects for changes and call 'reflow' on floatThead.
// You can also manually trigger a reflow by triggering an event on the table element called 'update', eg: jQuery('.table').trigger('update');
var directive = {
require: '?ngModel',
scope: {

This comment has been minimized.

Sign in to view

Copy link
@rapaantti

rapaantti Nov 16, 2015

This makes scope isolated so the scope.$watch(attrs.ngModel, ...) doesn't work anymore
floatTheadEnabled: '='
},
link: link,
restrict: 'A'
};
return directive;

function link(scope, element, attrs, ngModel) {
var isEnabled = (scope.floatTheadEnabled === true);

if (isEnabled) {
jQuery(element).floatThead(scope.$eval(attrs.floatThead));
}

scope.$watch('floatTheadEnabled', function (newVal) {
if (newVal === true) {
jQuery(element).floatThead(scope.$eval(attrs.floatThead));
} else {
jQuery(element).floatThead('destroy');
}
});

if (ngModel) {
// Set $watch to do a deep watch on the ngModel (collection) by specifying true as a 3rd parameter
scope.$watch(attrs.ngModel, function () {
jQuery(element).floatThead('reflow');
}, true);
} else {
$log.info('floatThead: ngModel not provided!');
}

element.bind('update', function () {
$timeout(function () {
jQuery(element).floatThead('reflow');
}, 0);
});

element.bind('$destroy', function () {
jQuery(element).floatThead('destroy');
});
}
}
})();
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "angular-floatThead",
"main": "angular-floatThead.js",
"version": "0.0.1",
"version": "0.1.0",
"homepage": "https://github.com/brandon-barker/angular-floatThead",
"authors": [
"Brandon Barker <[email protected]>"
Expand Down
175 changes: 175 additions & 0 deletions test/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,175 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>angular-floatThead test</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ=="
crossorigin="anonymous">

<script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/floatThead/dist/jquery.floatThead.min.js"></script>
<script type="text/javascript" src="../angular-floatThead.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"
integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ=="
crossorigin="anonymous"></script>

<style>
.container {
padding-top: 60px;
}

thead > tr > th {
background-color: #fff;
}

.wrapper {
height: 400px;
overflow: auto;
position: relative;
}
</style>

<script type="text/javascript">
angular.module('floatThead')
.controller('TestCtrl', function () {
this.enabled = false;

this.toggleFloatThead = function () {
this.enabled = !this.enabled;
};
});
</script>
</head>
<body ng-app="floatThead">
<div class="container" ng-controller="TestCtrl as test">
<div class="row">
<div class="col-md-12">
<button class="btn btn-default" ng-click="test.toggleFloatThead()" ng-if="!test.enabled">Enable floatThead</button>
<button class="btn btn-default" ng-click="test.toggleFloatThead()" ng-if="test.enabled">Disable floatThead</button>
</div>
</div>

<br />

<div class="row">
<div class="col-md-12">
<div class="wrapper">
<table float-thead="{ scrollingTop: 114, useAbsolutePositioning: false }" float-thead-enabled="test.enabled"
class="table table-bordered table-striped" style="min-width: 0px; table-layout: auto;">
<thead>
<tr>
<th><a href="#" id="demoHeader1">click me</a></th>
<th><a href="#" id="demoHeader2">mouse over me</a></th>
<th><a href="#" id="demoHeader3">Header...3</a></th>
</tr>
</thead>

<tbody>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
<tr>
<td>And Repeat 1</td>
<td>And Repeat 2</td>
<td>And Repeat 3</td>
</tr>
<tr>
<td>Cell Content 1</td>
<td>Cell Content 2</td>
<td>Cell Content 3</td>
</tr>
<tr>
<td>More Cell Content 1</td>
<td>More Cell Content 2</td>
<td>More Cell Content 3</td>
</tr>
<tr>
<td>Even More Cell Content 1</td>
<td>Even More Cell Content 2</td>
<td>Even More Cell Content 3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

0 comments on commit 2b1b01f

Please sign in to comment.