Send html content with variables to template from

问题:

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

回答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?