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

$compile ではなく $interpolate を使用する必要があります。$interpolate は文字列を返します。これは、この場合に必要な $scope.anyModule です。$compile は DOM 要素を返します。

これを確認してください：ng-bind-htmlのAngularJSデータバインド?

于 2015-07-26T16:06:58.027 に答える