$compile service generates '<' error

Question

Syntax Error: Token '<' not a primary expression at column 1 of the expression [<div>I think happiness is key to everything</div>] starting at [<div>I think happiness is key to everything</div>].

html
--------------------
<p dynamic="<div>I think happiness is key to everything</div>"></p>

directive
---------------------
app.directive('dynamic', function($compile){
  return function(scope, element, attrs) {
    scope.$watch(
        function(scope) {
            return scope.$eval(attrs.dynamic);
        },
        function(value) {
            element.html(value);
            $compile(element.contents())(scope);
        }
    );
  };
});

Not sure why this is generating the error. I tried on angular error page but could not find suitable answer. I have used this angular ng-bind-html and directive within it to solve my problem but it throws error. Any help is greatly appreciated. Thank you

score 1 · Accepted Answer · answered Apr 08 '17 at 06:53

See http://jsfiddle.net/4crh12zm/

<p dynamic="'<div>I think happiness is key to everything</div>'"></p>

You try to evaluate the given expression, but the expression you want is actually a string, so you have to pass it as a string.

So add quotes for the value you pass to "dynamic".

$compile service generates '<' error

1 Answers1