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