I am attempting to create a directive with an object argument that includes a property called map which can be a function.
However, each time I run it, I encounter the following error:
https://docs.angularjs.org/error/$parse/syntax?p0=%7B&p1=is%20unexpected,%20expecting%20%5B%7D%5D&p2=159&p3=%5B%7B%20name%20:%20%27Nom%27,%20map%20:%20%27id%27%20%7D,%7B%20name%20:%20%27Description%27,%20map%20:%20%27titre_fr%27%20%7D,%7B%20name%20:%20%27Type%20de%20Valeur%27,%20map%20:%20%27type_valeur%27%20%7D,%20%7B%20name%20:%20%27test%27,%20map%20:%20function(d)%20%7B%20return%20%27ok%27;%20%7D%7D%5D&p4=%7B%20return%20%27ok%27;%20%7D%7D%5D
This is how my directive is defined :
directive.js
.directive('apiTable', ['$rootScope', 'APIService', function($rootScope, APIService)
{
return {
restrict : 'E',
templateUrl : '/js/angular/app/ui/api-table.html',
transclude : true,
scope :
{
mapping : '=',
route : '@'
},
controller : function($scope)
{
$scope.data = [];
$scope.page = 0;
this.mapResult = function(data)
{
for(var i = 0; i < data.length; i++)
{
var temp = [];
for(var j = 0; j < $scope.mapping.length; j++)
{
temp[0] = i + 1;
if(typeof(data[i][$scope.mapping[j].map]) !== 'undefined')
{
if(typeof(data[i][$scope.mapping[j].map]) == 'function')
{
console.log('ok')
}
else
{
temp[j + 1] = data[i][$scope.mapping[j].map];
}
}
else
{
temp[j + 1] = "";
}
}
$scope.data.push(temp);
}
};
this.getData = function(p)
{
APIService.getData($scope.route, p)
.then(function(data)
{
this.mapResult(data.results);
}.bind(this));
};
this.getData({ p : $scope.page });
}
};
}])
And here is how it is called :
view.html
<api-table route="_dictionnaryAPIFindByDomain" mapping="[{ name : 'Nom', map : 'id' },{ name : 'Description', map : 'titre_fr' },{ name : 'Type de Valeur', map : 'type_valeur' }, { name : 'test', map : function(d) { return 'ok'; }}]"></api-table>