1

在寻找这个问题很久之后，我决定在 StackOverflow 中做我的第一个问题。我希望任何人都可以帮助我。

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

    <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 语法（正常，由引导程序给出）来做到这一点。当我尝试以这种方式进行时，我必须在 javascript 文件中声明幻灯片的所有内容。

    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 内容显示良好，但变量不显示。我也试过这个：

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

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

感谢您的关注

4

1 回答 1

1

您应该使用 $interpolate 而不是 $compile。$interpolate 返回一个字符串，这是 $scope.anyModule 在这种情况下需要的；$compile 返回一个 DOM 元素。

检查这个：AngularJS data bind in ng-bind-html?

于 2015-07-26T16:06:58.027 回答