I'm fairly new to AngularJS and am having the current problem.
I have the following in my controller
//Define the programs list table columns
$scope.programListColumns = "[{ Name: 'Name'},{ Status: 'Status'},{ CreatedByUserName: 'Created By'},{ ModifiedDate: 'Modified'},{ ModifiedByUserName: 'Modified By'}]";
I would like to use this as a columnmap for my element in the html, like so...
<table-helper datasource="programsList" columnmap="{{programListColumns}}"></table-helper>
My directive is quite extensive, but I basically build a table from my datasource and map the data I want from it using my columnmap, creating headers and rows for each item if that makes sense.
Here is my directive abbreviated a bit...
(function(){
var app = angular.module("MdfAngularApp");
var tableHelper = function() {
//Initiate variables for directive
//var template = '<div class="tableHelper"></div>',
var link = function(scope, element, attrs) {
var headerCols = [],
tableStart = '<table>',
tableEnd = '</table>',
table = '',
visibleProps = [],
sortCol = null,
sortDir = 1;
//Watch the datasource for changes.
scope.$watchCollection('datasource', render);
... Functions go here ...
return {
restrict: 'E',
replace: true,
scope: {
columnmap: '@',
datasource: '='
},
link: link,
}
};
app.directive('tableHelper', tableHelper);
}());
Doing the above I get an empty string as my columnmap.
Now if I put my html like this
<table-helper datasource="programsList" columnmap="[{ Name: 'Name'},{ Status: 'Status'},{ CreatedByUserName: 'Created By'},{ ModifiedDate: 'Modified'},{ ModifiedByUserName: 'Modified By'}]"></table-helper>
and change my isolate scope columnmap property to "=", all is fine. I'm just trying to be a bit more encapsulated than this.
Any help would be greatly appreciated.
My problem was that I wasn't parsing my columnmap as an object. Once I did that, and provided valid json, my solution worked.