Within my AngularJS controller, there is a function:
//some stuff from controller
var variable1;
var variable2;
$scope.setTitle = function () {
if ( //sth) {
variable1 = "string"
return variable1;
}
else {
(function () {
//setting the variable2 - it will be the HTML code
variable2 = angular.element(document.querySelector('titleID'));
variable2.append(title);
})();
return variable2;
}
};
The title retrieved from a JSON file has the following structure:
title = "Return product: <span data-ng-bind=\"productRet.ID\" />"
Using the JSON file is necessary due to its complex hierarchy, resulting in variations of the title within the else statement of the function.
I invoke setTitle() within a directive template:
.directive('myDirective', ['$compile', function ($compile) {
return {
restrict: 'E',
link: function (scope, element, attrs) {
var template = {
<!-- a lot of HTML -->
+ "<div id=\"titleID\">"
+ "<span class=\"navbar-brand\" > {{setTitle()}} </span>"
+ </div>
};
templateObj = $compile(template)(scope);
element.append(templateObj);
}
}
}]);
If variable1 is returned by setTitle(), everything functions correctly. However, complications arise when variable2 is returned, triggering an error:
"[$interpolate:interr] Can't interpolate: {{setTitle()}}
Error: [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: setTitle()
What is the proper approach to embed the HTML content from variable2 into my template?