将带有变量的html内容从控制器AngularJS发送到模板 [英] Send html content with variables to template from controller AngularJS

问题描述

搜索了很长时间后，我决定在StackOverflow中做第一个问题.我希望任何人都能帮助我.

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.

我正在用不同的幻灯片制作ui.bootstrap.carousel.初始结构如下:

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>

即使没有使用ng-repeat和任何活动语句，该命令在开始时也非常有效.当我想设置自定义goToSlide()按钮时，问题就开始了.环顾四周，我发现我只能使用ng-repeat语法(正常且由Bootstrap给出)来做到这一点.当我尝试以这种方式进行操作时，必须在javascript文件中声明幻灯片的所有内容.

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> \
            "});
      });

然后，在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>

html内容显示良好，但变量未显示.我也尝试过这个:

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> "});

如果您知道该问题的任何可能解决方案，或者只是设置了一个非ng-repeat语法的活动滑块，我将不胜感激.

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.

感谢您的关注

推荐答案

您应该使用$ interpolate而不是$ compile. $ interpolate返回一个字符串，这是$ scope.anyModule需要放入的字符串这个案例; $ compile返回一个DOM元素.

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.

检查以下内容: AngularJS数据绑定在ng-bind-html中吗?

这篇关于将带有变量的html内容从控制器AngularJS发送到模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！