Skip to content

Commit

Permalink
Added ng-click handle
Browse files Browse the repository at this point in the history
  • Loading branch information
@asafdav
asafdav committed Jan 17, 2014
1 parent fb2593c commit 1e29fcb
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 88 deletions.
88 changes: 48 additions & 40 deletions build/ng-csv.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,54 +42,59 @@ angular.module('ngCsv.directives', []).
filename:'@filename',
header: '&csvHeader',
txtDelim: '@textDelimiter',
fieldSep: '@fieldSeparator'
fieldSep: '@fieldSeparator',
ngClick: '&'
},
controller: ['$scope', '$element', '$attrs', '$transclude', function (
$scope, $element, $attrs, $transclude
) {
$scope.csv = '';
controller: [
'$scope',
'$element',
'$attrs',
'$transclude',
function ($scope, $element, $attrs, $transclude) {
$scope.csv = '';

$scope.$watch(function (newValue) {
$scope.buildCsv();
}, true);
$scope.$watch(function (newValue) {

This comment has been minimized.

Sign in to view

Copy link
@xdhmoore

xdhmoore Feb 21, 2014

Having trouble understanding this. According to http://docs.angularjs.org/api/ng/type/$rootScope.Scope#methods_$watch, it seems like this is building the csv every time $digest is run. Am I wrong?
$scope.buildCsv();
}, true);

$scope.buildCsv = function () {
var data = $scope.data();
var csvContent = 'data:text/csv;charset=utf-8,';
$scope.buildCsv = function () {
var data = $scope.data();
var csvContent = 'data:text/csv;charset=utf-8,';

// Check if there's a provided header array
var header = $scope.header();
if (header) {
var encodingArray = [];
angular.forEach(header, function (title) {
this.push(title);
}, encodingArray);
// Check if there's a provided header array
var header = $scope.header();
if (header) {
var encodingArray = [];
angular.forEach(header, function (title) {
this.push(title);
}, encodingArray);

var headerString = encodingArray.join($scope.fieldSep || ',');
csvContent += headerString + '\r\n';
}
var headerString = encodingArray.join($scope.fieldSep || ',');
csvContent += headerString + '\r\n';
}

// Process the data
angular.forEach(data, function (row, index) {
var infoArray = [];
angular.forEach(row, function (field) {
if (typeof field === 'string' && $scope.txtDelim) {
field = $scope.txtDelim + field + $scope.txtDelim;
}
this.push(field);
}, infoArray);
dataString = infoArray.join($scope.fieldSep || ',');
csvContent += index < data.length ? dataString + '\r\n' : dataString;
});
// Process the data
angular.forEach(data, function (row, index) {
var infoArray = [];
angular.forEach(row, function (field) {
if (typeof field === 'string' && $scope.txtDelim) {
field = $scope.txtDelim + field + $scope.txtDelim;
}
this.push(field);
}, infoArray);
dataString = infoArray.join($scope.fieldSep || ',');
csvContent += index < data.length ? dataString + '\r\n' : dataString;
});

$scope.csv = encodeURI(csvContent);
return $scope.csv;
};
$scope.csv = encodeURI(csvContent);
return $scope.csv;
};

$scope.getFilename = function () {
return $scope.filename || 'download.csv';
};
}],
$scope.getFilename = function () {
return $scope.filename || 'download.csv';
};
}
],
template: '<div class="csv-wrap">' +
'<div class="element" ng-transclude></div>' +
'<a class="hidden-link" ng-hide="true" ng-href="{{ csv }}"' +
Expand All @@ -101,6 +106,9 @@ angular.module('ngCsv.directives', []).

subject.bind('click', function (e) {
link[0].click();
if (!!scope.ngClick) {
scope.ngClick();
}
});
}
};
Expand Down
4 changes: 2 additions & 2 deletions build/ng-csv.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 12 additions & 6 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,7 @@
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-sanitize.min.js"></script>
<script src="../build/ng-csv.min.js"></script>
<!-- <script src="../src/ng-csv/directives/ng-csv.js"></script> -->

<script src="../build/ng-csv.js"></script>
</head>
<body>

Expand All @@ -29,10 +27,14 @@ <h1>ngCsv <small>example</small></h1>

<button class="btn btn-default"
ng-csv="getArray" filename="{{ filename }}.csv" field-separator="{{separator}}"
on-demand="{{onDemand}}">Export to CSV</button>
>Export to CSV</button>
<button class="btn btn-default"
ng-csv="getArray" csv-header="getHeader()" filename="{{ filename }}" field-separator="{{separator}}"
on-demand="{{onDemand}}">Export to CSV with header</button>
>Export to CSV with header</button>

<button class="btn btn-default"
ng-csv="getArray" csv-header="getHeader()" filename="{{ filename }}" field-separator="{{separator}}"
ng-click="clickFn()">Export with ng-click</button>

<button class="btn btn-default" ng-click="addRandomRow()">Add row</button>
</div>
Expand All @@ -47,8 +49,12 @@ <h1>ngCsv <small>example</small></h1>

$scope.addRandomRow = function() {
$scope.getArray.push({a: Math.floor((Math.random()*10)+1), b: Math.floor((Math.random()*10)+1)});
}
};
$scope.getHeader = function () {return ["A", "B"]};

$scope.clickFn = function() {
console.log("click click click");
};
});
</script>

Expand Down
88 changes: 48 additions & 40 deletions src/ng-csv/directives/ng-csv.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,54 +15,59 @@ angular.module('ngCsv.directives', []).
filename:'@filename',
header: '&csvHeader',
txtDelim: '@textDelimiter',
fieldSep: '@fieldSeparator'
fieldSep: '@fieldSeparator',
ngClick: '&'
},
controller: ['$scope', '$element', '$attrs', '$transclude', function (
$scope, $element, $attrs, $transclude
) {
$scope.csv = '';
controller: [
'$scope',
'$element',
'$attrs',
'$transclude',
function ($scope, $element, $attrs, $transclude) {
$scope.csv = '';

$scope.$watch(function (newValue) {
$scope.buildCsv();
}, true);
$scope.$watch(function (newValue) {
$scope.buildCsv();
}, true);

$scope.buildCsv = function () {
var data = $scope.data();
var csvContent = 'data:text/csv;charset=utf-8,';
$scope.buildCsv = function () {
var data = $scope.data();
var csvContent = 'data:text/csv;charset=utf-8,';

// Check if there's a provided header array
var header = $scope.header();
if (header) {
var encodingArray = [];
angular.forEach(header, function (title) {
this.push(title);
}, encodingArray);
// Check if there's a provided header array
var header = $scope.header();
if (header) {
var encodingArray = [];
angular.forEach(header, function (title) {
this.push(title);
}, encodingArray);

var headerString = encodingArray.join($scope.fieldSep || ',');
csvContent += headerString + '\r\n';
}
var headerString = encodingArray.join($scope.fieldSep || ',');
csvContent += headerString + '\r\n';
}

// Process the data
angular.forEach(data, function (row, index) {
var infoArray = [];
angular.forEach(row, function (field) {
if (typeof field === 'string' && $scope.txtDelim) {
field = $scope.txtDelim + field + $scope.txtDelim;
}
this.push(field);
}, infoArray);
dataString = infoArray.join($scope.fieldSep || ',');
csvContent += index < data.length ? dataString + '\r\n' : dataString;
});
// Process the data
angular.forEach(data, function (row, index) {
var infoArray = [];
angular.forEach(row, function (field) {
if (typeof field === 'string' && $scope.txtDelim) {
field = $scope.txtDelim + field + $scope.txtDelim;
}
this.push(field);
}, infoArray);
dataString = infoArray.join($scope.fieldSep || ',');
csvContent += index < data.length ? dataString + '\r\n' : dataString;
});

$scope.csv = encodeURI(csvContent);
return $scope.csv;
};
$scope.csv = encodeURI(csvContent);
return $scope.csv;
};

$scope.getFilename = function () {
return $scope.filename || 'download.csv';
};
}],
$scope.getFilename = function () {
return $scope.filename || 'download.csv';
};
}
],
template: '<div class="csv-wrap">' +
'<div class="element" ng-transclude></div>' +
'<a class="hidden-link" ng-hide="true" ng-href="{{ csv }}"' +
Expand All @@ -74,6 +79,9 @@ angular.module('ngCsv.directives', []).

subject.bind('click', function (e) {
link[0].click();
if (!!scope.ngClick) {
scope.ngClick();
}
});
}
};
Expand Down
23 changes: 23 additions & 0 deletions test/unit/ngCsv/directives/ngCsv.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,29 @@ describe('ngCsv directive', function () {
expect(element.html()).toContain('download="download.csv"');
});

it('Accepts ng-click attribute ', function () {
$rootScope.clicked = false;
// Create click handler
$rootScope.clickTest = function() {
$rootScope.clicked = true;
}

// Make sure clicked is false
expect($rootScope.clicked).toBeFalsy();

// Compile a piece of HTML containing the directive
var element = $compile("<div ng-csv='test' ng-click='clickTest()'></div>")($rootScope);
element.triggerHandler('click');

// fire all the watches, so the scope expression {{1 + 1}} will be evaluated
$rootScope.$digest();
// Check that the compiled element contains the templated content
expect(element.html()).toContain('download="download.csv"');

// Check if clickTest was executed
expect($rootScope.clicked).toBeTruthy();
});

it('Sets the provided filename', function () {
// Compile a piece of HTML containing the directive
var element = $compile("<div ng-csv='test' filename='custom.csv'></div>")($rootScope);
Expand Down

0 comments on commit 1e29fcb

Please sign in to comment.