1

私は AngularJS の新しいミツバチです。angular-uiアコーディオンについて知っています。しかし、私はそれを使いたくありません。おもちゃのアコーディオンを自作してAngularJSでアコーディオンの基礎を学びたいです。ここに私のコードの本体部分があります。

 <body ng-app="MyZippy">
    <zippy slide-title="Say Hello To Universe" slide-content="Hello Universe"></zippy>
    <zippy slide-title="Say Hello To World" slide-content="Hello World"></zippy>
  </body>

ここにapp.jsがあります

var app = angular.module('MyZippy', []);

app.directive('zippy',function(){
    var linkFn = function(scope,element,attrs){
        scope.isHideContent = false;
        scope.toggleContent = function(){

           scope.isHideContent = !scope.isHideContent;

        };
    };
    return {
      restrict :"E",  
      scope:{
       zippytitle:"@slideTitle",
       zippycontent:"@slideContent"
      },
      link : linkFn,
      template : 
                  '<div ng-click="toggleContent()" style="border:1px solid #ccc;padding:3px;width:207px"><h3 style="padding:3px;background:#ccc;width:200px;margin:0px;">{{zippytitle}}</h3>'+
                  '<div ng-show="isHideContent"><p>{{zippycontent}}</p></div></div>'
    };
});

アコーディオン効果を得るにはどうすればよいですか？リンク関数ですべてのzippyディレクティブ参照を取得するにはどうすればよいですか? コンパイル機能はここで私を助けますか? ああ..もちろんJQueryがなければ、ここで出力を見ることができます

前もって感謝します

4

0 に答える 0