Send html content with variables to template from controller AngularJS

Question

After being searching for this issue for a long time, I decided to do my first question in StackOverflow. I hope anyone can help me.

I'm doing a ui.bootstrap.carousel with different slides. The initial structure is the following :

    <carousel interval="carInterval" no-pause="true">
      <slide>
        some html content, {{ modules }}
      </slide>
      <slide>
        totally different content, {{ more variables }}
      </slide>
    </carousel>

That worked really well at the start, even without using ng-repeat and any active statement. The problem started when I wanted to set a custom goToSlide() buttons. Looking around I just found that I can do it only using the ng-repeat syntax (the normal and given by bootstrap). When I tried to do it in this way, I have to declare all the content of the slides in the javascript file.

    angular.module('anyApp')
      .controller('MainCtrl', function ($scope) {
        $scope.anyModule="Anything"
        $scope.slider=[]
        $scope.slider.push({ content: " \
            <h1> html content {{ anyModule }} </h1> \
            "});
      });

Then, in the html:

    <carousel interval="myInterval" no-wrap="noWrapSlides">
       <slide ng-repeat="slide in slides" active="slide.active">
         <p ng-bind-html="slide.content"> </p>
       </slide>
    </carousel>

The html content appears well but the variables don't appear. I tried also this:

$scope.slider.push({ content: " \
    <h1> html content <p ng-bind-template='{{ anyModule }} '></p></h1> "});

If you know any possible solution for this problem or maybe just set and an active slider that is not in ng-repeat syntax, I would appreciate it so much.

Thanks for your attention

Community · Accepted Answer · 2017-05-23 10:24:20Z

1

You should use $interpolate not $compile. $interpolate returns a string, which is what $scope.anyModule needs to be in this case; $compile returns a DOM element.

check this: AngularJS data bind in ng-bind-html?

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Jul 26, 2015 at 16:06

JJPunch

1761 silver badge10 bronze badges

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

1 Comment

Lu Chinke Over a year ago

I also solved this issue doing a directive to compile the DOM, as i found in this reference: stackoverflow.com/questions/18157305/…

Collectives™ on Stack Overflow

Send html content with variables to template from controller AngularJS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related