1

Angular UI Bootstrap ( http://angular-ui.github.io/bootstrap/#/accordion )でアコーディオンを構築しようとしています。オン選択したアコーディオン グループに従ってモデルを設定するにはどうすればよいですか。UI Bootstrapテンプレートを使用する実用的なソリューションを見つけました。

私のコードでは、テンプレートを追加します<script type="text/ng-template" id="template/accordion/accordion-group.html">

このテンプレートでは、{{heading}}set byを使用できます<accordion-group heading="{{group.title}}" content="{{group.content}}" ng-repeat="group in groups"></accordion-group>。

しかし、他のカスタム テンプレート変数を設定するにはどうすればよいでしょうか? content="{{group.content}}"アコーディオンタグにも設定してみました。設定しても使い方がわからず、試してみ{{content.group}} {{content}}たり{% content %}。

完全なコード: http://plnkr.co/dSIVGg64vYSTAv5vFSof

4

1 に答える 1

1

編集されたプランカーを参照してください: http://plnkr.co/edit/8YCUemqILQy3knXqwomJ

ディレクティブのテンプレート内でコントローラーをネストしようとしました。私は間違っているかもしれませんが、それは機能しないか、少なくともあまり良い方法ではありません.

コントローラーをネストする代わりにCollapseDemoCtrl、ディレクティブにも変換することをお勧めします。{{group.content}}その後、またはその他のコンテンツをこのディレクティブに渡すことができます。

編集: ディレクティブ スコープにデータを渡す方法の例

HTML は次のようになります。

<span ng-repeat="group in groups">
  <div testDirective content="group.content" title="group.title"> </div>
</span>

ディレクティブは次のようになります。 

angular.module('testModule', [])
  .directive('testDirective', function(){
    return {
      restrict: 'A',
      scope: { 
        content:'=content',
        title: '=title'
      },
      template: '<h1>{{title}}<h1> <div>{{content}}</div>',
      link: function(scope, element, attrs) {
      }
    }
  });
于 2013-06-01T19:35:42.623 に答える