How to append HTML from Controller into directive template AngularJS - error Can't interpolate

Question

I have a function in my AngularJS controller:

//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;
            }
        };

I'm getting the title from JSON file and it looks like:

 title = "Return product: <span data-ng-bind=\"productRet.ID\" />"

I have to use the JSON file, because I have a big "tree" inside this JSON file, and the title is different according to what will happen inside the function in else statement

I'm calling setTitle() in my template in directive:

.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 the result from setTitle() is the variable1 everything is fine. The problem is when the result is variable2 because I'm getting an error:

"[$interpolate:interr] Can't interpolate: {{setTitle()}}
Error: [$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: setTitle()

How to properly insert the HTML code from variable2 into my template??

You should not manipulate DOM in controllers. It is totally against AngularJS philosophy. Move to directive link function. Or better put it in the HTML through ng-show, ng-click, etc. — Joy
– Joy, Commented Jul 23, 2015 at 11:09

Doron Brikman · Accepted Answer · 2015-07-23 09:34:16Z

1

(function () {
                    //setting the variable2 - it will be the HTML code
                      var variable2 = angular.element(document.querySelector('titleID'));
                      variable2.append(title);                        
                })();
            return variable2;

variable2 isn't available outside of the function scope. Try something like this:

var variable2;
(function () {
    //setting the variable2 - it will be the HTML code
    variable2 = angular.element(document.querySelector('titleID'));
    variable2.append(title);                        
})();
return variable2;

answered Jul 23, 2015 at 9:34

Doron Brikman

2,5941 gold badge20 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kamyk Over a year ago

Yes yes, it's my mistake, but even if it's outside the scope I'm getting an error

Collectives™ on Stack Overflow

How to append HTML from Controller into directive template AngularJS - error Can't interpolate

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related