从控制器 AngularJS 发送 html 带有变量的内容到模板

Question

在搜索这个问题很久之后，我决定在 Whosebug 上做我的第一道题。我希望有人能帮助我。

我正在做 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 和任何 active 语句，它在一开始就非常有效。当我想设置自定义 goToSlide() 按钮时，问题就开始了。环顾四周，我发现我只能使用 ng-repeat 语法（正常并由 bootstrap 给出）来完成。当我尝试这样做时，我必须在 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 语法中的活动滑块，我将非常感激。

感谢您的关注

Answer 1

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

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

从控制器 AngularJS 发送 html 带有变量的内容到模板

Send html content with variables to template from controller AngularJS

carousel

angularjs

ng-bind-html

ng-bind

ui.bootstrap