I am trying to create a brand new scope variable in the directive. It just consists of simplified version of my JSON data. I want to avoid processing complex JSON objects in the HTML hence I am trying to create a JSON data structure known only to directive.
I want to know HOW can we create a brand new variable ?
I tried something like this and Angularjs throws a bunch of errors in the console. I don't know exactly what is it complaining about.
angularApp.directive('viewPersonData', function() {
return {
restrict: 'E',
replace: true,
scope: {
addressData: '=',
professionalData: '=',
creditData: '=',
},
templateUrl: 'viewPersonData.html',
link: linker
};
function linker(scope, element, attrs) {
scope.showData= function() {
if( something)
{
//defining a new scope variable
scope.employees = [];
var firstname = "John";
var lastname = "Smith";
var employee = {
"firstname": firstname,
"lastname": lastname
}
scope.employees.push(employee);
return true;
}
}
}
});
Even though HTML template ( viewPersonData.html ) does retrieve the employee data through below code.
<tbody ng-repeat="employee in employees">
<tr>
<td class="alnLt b" >{{employee.firstname}}</td>
<td class="alnLt b">{{employee.lastname}}</td>
</tr>
</tbody>
I see following errors in the console :
Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: $watchCollectionWatch; newVal: 8; oldVal: 7","fn: function (context) {\r\n try {\r\n for(var i = 0, ii = length, part; i<ii; i++) {\r\n if (typeof (part = parts[i]) == 'function') {\r\n part = part(context);\r\n if (part == null || part == undefined) {\r\n part = '';\r\n } else if (typeof part != 'string') {\r\n part = toJson(part);\r\n }\r\n }\r\n concat[i] = part;\r\n }\r\n return concat.join('');\r\n }\r\n catch(err) {\r\n var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n $exceptionHandler(newErr);\r\n }\r\n }; newVal: \"John\"; oldVal: undefined","fn: function (context) {\r\n try {\r\n for(var i = 0, ii = length, part; i<ii; i++) {\r\n if (typeof (part = parts[i]) == 'function') {\r\n part = part(context);\r\n if (part == null || part == undefined) {\r\n part = '';\r\n } else if (typeof part != 'string') {\r\n part = toJson(part);\r\n }\r\n }\r\n concat[i] = part;\r\n }\r\n return concat.join('');\r\n }\r\n catch(err) {\r\n var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n $exceptionHandler(newErr);\r\n }\r\n }; newVal: \"Smith\"; oldVal: undefined"],["fn: $watchCollectionWatch; newVal: 9; oldVal: 8","fn: function (context) {\r\n try {\r\n for(var i = 0, ii = length, part; i<ii; i++) {\r\n if (typeof (part = parts[i]) == 'function') {\r\n part = part(context);\r\n if (part == null || part == undefined) {\r\n part = '';\r\n } else if (typeof part != 'string') {\r\n part = toJson(part);\r\n }\r\n }\r\n concat[i] = part;\r\n }\r\n return concat.join('');\r\n }\r\n catch(err) {\r\n var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n $exceptionHandler(newErr);\r\n }\r\n }; newVal: \"John\"; oldVal: undefined","fn: function (context) {\r\n try {\r\n for(var i = 0, ii = length, part; i<ii; i++) {\r\n if (typeof (part = parts[i]) == 'function') {\r\n part = part(context);\r\n if (part == null || part == undefined) {\r\n part = '';\r\n } else if (typeof part != 'string') {\r\n part = toJson(part);\r\n }\r\n }\r\n concat[i] = part;\r\n }\r\n return concat.join('');\r\n }\r\n catch(err) {\r\n var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n $exceptionHandler(newErr);\r\n }\r\n }; newVal: \"Smith\"; oldVal: undefined"],["fn: $watchCollectionWatch; newVal: 10; oldVal: 9","fn: function (context) {\r\n try {\r\n for(var i = 0, ii = length, part; i<ii; i++) {\r\n if (typeof (part = parts[i]) == 'function') {\r\n part = part(context);\r\n if (part == null || part == undefined) {\r\n part = '';\r\n } else if (typeof part != 'string') {\r\n part = toJson(part);\r\n }\r\n }\r\n concat[i] = part;\r\n }\r\n return concat.join('');\r\n }\r\n catch(err) {\r\n var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n $exceptionHandler(newErr);\r\n }\r\n }; newVal: \"John\"; oldVal: undefined","fn: function (context) {\r\n try {\r\n for(var i = 0, ii = length, part; i<ii; i++) {\r\n if (typeof (part = parts[i]) == 'function') {\r\n part = part(context);\r\n if (part == null || part == undefined) {\r\n part = '';\r\n } else if (typeof part != 'string') {\r\n part = toJson(part);\r\n }\r\n }\r\n concat[i] = part;\r\n }\r\n return concat.join('');\r\n }\r\n catch(err) {\r\n var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n $exceptionHandler(newErr);\r\n }\r\n }; newVal: \"Smith\"; oldVal: undefined"],["fn: $watchCollectionWatch; newVal: 11; oldVal: 10","fn: function (context) {\r\n try {\r\n for(var i = 0, ii = length, part; i<ii; i++) {\r\n if (typeof (part = parts[i]) == 'function') {\r\n part = part(context);\r\n if (part == null || part == undefined) {\r\n part = '';\r\n } else if (typeof part != 'string') {\r\n part = toJson(part);\r\n }\r\n }\r\n concat[i] = part;\r\n }\r\n return concat.join('');\r\n }\r\n catch(err) {\r\n var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n $exceptionHandler(newErr);\r\n }\r\n }; newVal: \"John\"; oldVal: undefined","fn: function (context) {\r\n try {\r\n for(var i = 0, ii = length, part; i<ii; i++) {\r\n if (typeof (part = parts[i]) == 'function') {\r\n part = part(context);\r\n if (part == null || part == undefined) {\r\n part = '';\r\n } else if (typeof part != 'string') {\r\n part = toJson(part);\r\n }\r\n }\r\n concat[i] = part;\r\n }\r\n return concat.join('');\r\n }\r\n catch(err) {\r\n var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n $exceptionHandler(newErr);\r\n }\r\n }; newVal: \"Smith\"; oldVal: undefined"],["fn: $watchCollectionWatch; newVal: 12; oldVal: 11","fn: function (context) {\r\n try {\r\n for(var i = 0, ii = length, part; i<ii; i++) {\r\n if (typeof (part = parts[i]) == 'function') {\r\n part = part(context);\r\n if (part == null || part == undefined) {\r\n part = '';\r\n } else if (typeof part != 'string') {\r\n part = toJson(part);\r\n }\r\n }\r\n concat[i] = part;\r\n }\r\n return concat.join('');\r\n }\r\n catch(err) {\r\n var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n $exceptionHandler(newErr);\r\n }\r\n }; newVal: \"John\"; oldVal: undefined","fn: function (context) {\r\n try {\r\n for(var i = 0, ii = length, part; i<ii; i++) {\r\n if (typeof (part = parts[i]) == 'function') {\r\n part = part(context);\r\n if (part == null || part == undefined) {\r\n part = '';\r\n } else if (typeof part != 'string') {\r\n part = toJson(part);\r\n }\r\n }\r\n concat[i] = part;\r\n }\r\n return concat.join('');\r\n }\r\n catch(err) {\r\n var newErr = new Error('Error while interpolating: ' + text + '\\n' + err.toString());\r\n $exceptionHandler(newErr);\r\n }\r\n }; newVal: \"Smith\"; oldVal: undefined"]]
at Error (native)
at Object.Scope.$digest (angular.js:8841:61)
at Object.Scope.$apply (angular.js:9012:24)
at done (angular.js:10265:45)
at completeRequest (angular.js:10449:7)
at XMLHttpRequest.xhr.onreadystatechange (angular.js:10404:11)
Get rid of the linker and use the controller attribute of the directive,
controller: (['$scope', function($scope) {
$scope.employees = [{
"firstname": firstname,
"lastname": lastname
}];
}
])
This creates the employees data structure.
Pass the function inside the array. Otherwise, if minifier is used, webpack will replace $scope by some alphabet. Then it won't work in the production.
If not passed inside the array, you'll get the error Error Reference/ $injector/ unpr in the production environment.