javascript - AngularJS directive callback function -
so have directive accepts callback function parameter other options. here directive:
.directive('csvreader', [function () { // function convert json var converttojson = function (content) { // declare our variables var lines = content.csv.split('\n'), headers = lines[0].split(content.separator), columncount = lines[0].split(content.separator).length, results = []; // each row (var = 1; < lines.length; i++) { // declare object var obj = {}; // our current line var line = lines[i].split(new regexp(content.separator + '(?![^"]*"(?:(?:[^"]*"){2})*[^"]*$)')); // each header (var j = 0; j < headers.length; j++) { // populate our object obj[headers[j]] = line[j]; } // push our object our result array results.push(obj); } // return our array return results; }; return { restrict: 'a', scope: { results: '=', separator: '=', complete: '&' }, link: function (scope, element, attrs) { // create our data model var data = { csv: null, separator: scope.separator || ',' }; // when file input changes element.on('change', function (e) { // our files var files = e.target.files; // if have files if (files && files.length) { // create our filereader , our file var reader = new filereader(); var file = (e.srcelement || e.target).files[0]; // once filereader has loaded reader.onload = function (e) { // contents of reader var contents = e.target.result; // set our contents our data model data.csv = contents; // apply scope scope.$apply(function () { // our data after has been converted json scope.results = converttojson(data); // if have callback function if (scope.complete) { // execute our callback scope.complete(scope.results); } }); }; // read our file contents reader.readastext(file); } }); } }; }]) as can see, when csv file has been converted json complete callback function invoked. on view have html looks this:
<div class="portlet light" ng-if="controller.results.length && !controller.import.error"> <div class="portlet-title"> <div class="caption caption-md"> <span class="caption-subject font-green-haze bold uppercase">collections import</span> </div> <div class="inputs"> <div class="portlet-input input-inline input-small"> <div class="input-icon right"> <i class="icon-magnifier"></i> <input type="text" class="form-control form-control-solid" placeholder="search..." ng-model="controller.filter"> </div> </div> </div> <div class="actions"> <div class="btn-group btn-group-devided" data-toggle="buttons"> <label class="btn btn-transparent grey-salsa btn-circle btn-sm" ng-repeat="size in controller.pagesizes" ng-class="{ active: controller.pagesize === size }"> <input type="radio" name="options" class="toggle" ng-model="controller.pagesize" ng-change="controller.pagesize = size"> {{ size }} </label> </div> </div> </div> <div class="portlet-body"> <table class="table table-hover table-light"> <thead> <tr class="uppercase"> <th> <a href="" ng-click="controller.predicate = 'reference'; controller.reverse = !controller.reverse">reference</a> </th> <th> <a href="" ng-click="controller.predicate = 'customerreference'; controller.reverse = !controller.reverse">customer reference</a> </th> <th> <a href="" ng-click="controller.predicate = 'customername'; controller.reverse = !controller.reverse">name</a> </th> <th> <a href="" ng-click="controller.predicate = 'customerbusinessname'; controller.reverse = !controller.reverse">company</a> </th> <th> <a href="" ng-click="controller.predicate = 'suppliername'; controller.reverse = !controller.reverse">supplier</a> </th> <th> <a href="" ng-click="controller.predicate = 'collectioncode'; controller.reverse = !controller.reverse">code</a> </th> <th> <a href="" ng-click="controller.predicate = 'status'; controller.reverse = !controller.reverse">status</a> </th> <th> <a href="" ng-click="controller.predicate = 'plannedcollectiondate'; controller.reverse = !controller.reverse">date</a> </th> </tr> </thead> <tbody> <tr dir-paginate="collection in controller.results | orderby: controller.predicate:controller.reverse | filter: controller.filter | itemsperpage : controller.pagesize"> <td> {{ collection.reference }} </td> <td> {{ collection.customerreference }} </td> <td> {{ collection.customername }} </td> <td> {{ collection.customerbusinessname }} </td> <td> {{ collection.suppliername }} </td> <td> {{ collection.collectioncode }} </td> <td> {{ collection.status }} </td> <td> {{ collection.plannedcollectiondate }} </td> </tr> </tbody> </table> <dir-pagination-controls></dir-pagination-controls> <div class="form-group"> <button class="btn btn-primary" ng-click="controller.save()">import</button> <button class="btn btn-default" ng-click="controller.cancel()">cancel</button> </div> </div> </div> when click "choose file" , select csv file, html above populate , can see data. problem want validate before display it, trying pass data directive controller via function (hence complete function), when try console.log out data null.
here method:
// used validate imported data self.validateresults = function (results) { console.log(self.results); // returns undefined console.log(results); // returns undefined console.log(self); // shows results data array in self.results }; and directive in html looks this:
<input type="file" csv-reader results="controller.results" complete="controller.validateresults(results)" /> can explain me doing wrong?
when invoke callback results need pass in object key results:
if (scope.complete) { // execute our callback scope.complete({results: scope.results}); } the key results in object pass scope.complete corresponds name of parameter defined in html complete="controller.validateresults(results)".
Comments
Post a Comment