Angularjs Directive:- scope not defined error

Question

myApp.directive('qsetAnswer', function(){
  var linker = function(scope,element,attr) {
    console.log(scope.body); // this prints fine.
  };
  return {
    restrict:'A',
    scope: '=info',
    template: '<h5> ' + scope.body + ' </h5>', // this gives error.
    link: linker
  }
});

The above gives:- scope not defined error

Edit:- the problem with template: '<h5>{{body}}</h5>', is that my {{body}} already contains html ie. <p> abc </p> doing it like template: '{{body}}' prints <p> abc </p> like a string.

Mike Robinson · Accepted Answer · 2013-11-19 21:13:05Z

2

Since you're binding HTML to a template, you can use the ng-bind-html directive.

This assumes you're using Angular 1.2+

template: '<h5 ng-html-bind="{{body}}"></h5>',

For Angular <1.2, use

template: '<h5 ng-html-bind-unsafe="{{body}}"></h5>',

If you run into $sce problems with version 1.2+, read the following:

You can tell Angular to trust your HTML, like so:

$scope.ans = $sce.trustAsHtml(' hi <bold> p </bold>');

edited Nov 19, 2013 at 21:13

answered Nov 19, 2013 at 17:48

Mike Robinson

25.2k8 gold badges63 silver badges83 bronze badges

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

1 Comment

Mike Robinson Over a year ago

@SangramSingh Updated again, with $sce example

Collectives™ on Stack Overflow

Angularjs Directive:- scope not defined error

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