Angular Expression Errors Ng-Bind-Html

Question

I am having a problem with my ng-bind-html expression, which may stem from the fact that I am not using curly braces, but instead using ** and @@ because I am using my angular in a laravel template, as such, I can't use curly braces. I get a lexer error in the ng-bind-html. Here is my code:

My app (that sets the alternate start and end symbols):

var app = angular.module('Mole', ['ngAnimate', 'ui.bootstrap'], function($interpolateProvider) {
        $interpolateProvider.startSymbol('**');
        $interpolateProvider.endSymbol('@@');
    });

My controller:

 $scope.slides= [{

    id:1,
    image:"",
    content: $sce.trustAsHtml("<div id='chartContainer'></div>")},
    {
    id:2,
    image:"",
    content:""
    },

    {
    id:3,
    image:"",
    content:""
    }],

My HTML:

<div id="carouselContainer">
    <uib-carousel interval="myInterval" no-wrap="noWrapSlides">
      <uib-slide ng-repeat="slide in slides" active="slide.active" index="slide.id">
        <img ng-src="**slide.img@@" style="margin:auto;">
        <div class="carousel-caption">
          <h4>Slide **slide.id@@</h4>
          <div ng-bind-html="**slide.content@@"></div> <!--Error Here-->
        </div>
      </uib-slide>
    </uib-carousel>
    </div>

ng-bind-html don't need interpolatio directive to evaluate values, it works without it like ng-bind-html="slide.content" should work — Pankaj Parkar
– Pankaj Parkar, Commented Jan 15, 2016 at 16:01
@PankajParkar already tried that, it didn't inject my HTML content when I did that, it literally just echoed out "slide.content" — Summer Developer
– Summer Developer, Commented Jan 15, 2016 at 16:02
What is your error? You do not import ngSanitize in your module, so i don't think $sce is defined for you. — IanGabes
– IanGabes, Commented Jan 15, 2016 at 16:10
It is defined, in the controller. I just didn't include those injections. My error is: Error: [$parse:lexerr] Lexer Error: Unexpected next character at columns 15-15 [@] in expression [**slide.content@@]. — Summer Developer
– Summer Developer, Commented Jan 15, 2016 at 16:11

IanGabes · Accepted Answer · 2016-01-15 19:56:40Z

1

Ok!

If you want to dynamically drop trusted HTML into the DOM, you have to bind the SCE function to the scope, and call it directly in the template. Here is a sample controller that I've taken from the linked plunker.

app.controller("Controller", function($scope, $sce){
  $scope.trustAsHtml = function(string) {
        return $sce.trustAsHtml(string);
    };
  $scope.slides= {
      id: 1,
      content:'<div id="YourContainer">Binding :)</div>'
    };

});

and in the template:

<div ng-controller="Controller" id="carouselContainer">
      **slides.id@@
      <div ng-href="**slides.id@@" ng-bind-html="trustAsHtml(slides.content)"></div>
</div>

Here is a plunkr!

You can inspect the element to see YourContainer was carried with the tag as well.

edited Jan 15, 2016 at 19:56

answered Jan 15, 2016 at 17:19

IanGabes

2,8171 gold badge24 silver badges28 bronze badges

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

2 Comments

Summer Developer Over a year ago

Thank you for your efforts, but if you look at your result, which is the same as I am getting, you will see the id of the <div> does not get passed, which is the key piece of content I need. Why is this the case? :(

IanGabes Over a year ago

My apologies, I misunderstood your goal. I've updated my answer with something that should accomplish what you want.

Collectives™ on Stack Overflow

Angular Expression Errors Ng-Bind-Html

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related