I have a problem getting the ng-click to the final html result depending on
if the sortable attribute exists or not. I am hoping that someone can help
me out it making it work.
I have created a couple of directives to build an html table for the
following:
<staff-list resource="/staff-list/json/staff-list.json">
<staff-list-columns order-by="DisplayName">
<staff-list-column title="Full Name" field="DisplayName" sortable
ng-click="staffList.sortHandler()"></staff-list-column>
<staff-list-column title="Extension" field="ExtensionNumber"
></staff-list-column>
<staff-list-column title="Mobile" field="MobileNumber"
></staff-list-column>
<staff-list-column title="Department" field="Department" sortable
ng-click="staffList.sortHandler()"></staff-list-column>
</staff-list-columns>
<staff-list-grid></staff-list-grid>
</staff-list>
However as you can see the following sortable directive is adding the
ng-click to that but not the final table html:
.directive('sortable', [function() {
return {
restrict: 'A',
link: function(scope, element, attributes) {
attributes.$set('ngClick', 'staffList.sortHandler()');
}
}
}])
*The following is the full module code with all the directives included +
table template:*
(function(window, angular, undefined) {'use strict';
angular.module('staffListModule', [])
.controller('StaffListController', ['$scope', function($scope) {
$scope.staffList = [];
$scope.staffList.sortHandler= function(attributes) {
console.log(attributes);
}
}])
.directive('staffList', ['$http',function($http) {
return {
restrict: 'E',
controller: function($scope) {
this.setColumns = function(cols) {
$scope.staffList.columns = cols;
};
},
link: function(scope, element, attributes) {
$http.get(attributes.resource)
.success(function(data) {
scope.staffList.data = data.d;
scope.$broadcast('ready-to-render-staff-list', scope.staffList
.data, scope.staffList.columns);
});
}
}
}])
.directive('staffListColumns', [function() {
return {
restrict: 'E',
require: ['^staffList', 'staffListColumns'],
controller: function() {
var columns = [];
this.addColumn = function(col) {
columns.push(col);
};
this.getColumns = function() {
return columns;
};
},
link: function(scope, element, attributes, controllers) {
var staffListController = controllers[0];
var staffListColumnsController = controllers[1];
staffListController.setColumns(staffListColumnsController.
getColumns());
scope.staffList.orderBy = attributes.orderBy;
}
}
}])
.directive('staffListColumn', [function() {
return {
restrict: 'E',
require: '^staffListColumns',
link: function(scope, element, attributes,
staffListColumnsController) {
staffListColumnsController.addColumn({
title: attributes.title,
field: attributes.field
});
}
}
}])
.directive('sortable', [function() {
return {
restrict: 'A',
link: function(scope, element, attributes) {
console.log(element,attributes);
attributes.$set('ngClick', 'staffList.sortHandler()');
}
}
}])
.directive('staffListGrid', [function() {
return {
restrict: 'E',
templateUrl: 'features/staff-list/partials/staff-list-partial.html',
replace: true,
controller: function($scope) {
var extractFields = function(data, columns) {
var rows = [];
var object = {};
angular.forEach(data, function (dValue, dKey) {
angular.forEach(columns, function(cValue, cKey) {
object[cValue.field] = dValue.Employee[cValue.field];
});
rows.push(object); //add extracted employee fields
object = {}; // reset object
});
return rows;
};
$scope.$on('ready-to-render-staff-list', function(e, data, columns
) {
var rows = extractFields(data, columns);
$scope.staffList.rows = rows;
});
}
}
}])
})(window, window.angular);
*This is the table template (staff-list-partial.html):*
<table id="simple-table" class="table table-striped table-bordered
table-hover">
<thead>
<tr>
<th ng-repeat="column in staffList.columns">{{column.title}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in staffList.rows | orderBy: staffList.orderBy track by
$index">
<td ng-repeat="column in staffList.columns">
{{row[column.field]}}
</td>
</tr>
</tbody>
</table>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
