I am attempting to create an angular directive that will extract a substring from a passed-in attribute. Below is the code I have written:
HTML:
<body ng-controller="MainCtrl">
<div><substring message="This is a test."></substring></div>
<div><substring message="So is this." ></substring></div>
</body>
Angular/Javascript:
var app = angular.module('myapp', []);
app.controller('MainCtrl', function($scope) {
});
app.directive('substring', function () {
return {
restrict: 'AE',
replace: true,
scope: { text: '=message' },
link: function (scope, elem, attrs) {
//alert(attrs.message);
var str = attrs.message;
scope.text = str.substring(1, 4);
},
template: '<H1>{{text}}</H1>'
};
});
Upon testing this code, I encountered the following error:
HTML1300: Navigation occurred. File: directive.html Error: [$parse:syntax] Syntax Error: Token 'is' is an unexpected token at column 6 of the expression [This is a test.] starting at [is a test.].
I've also attempted changing
'=message' to '@message'
However, this resulted in the substring functionality within the link function being ignored.
Why is this error occurring? Is Angular failing to recognize the content within the quotation marks as a string and instead trying to interpret it as a command? Most importantly, how can I resolve this issue?
Thank you.