Question

我是AngularJS的新蜜蜂。我知道有角度的手风琴。但我不想用它。我想通过自己制作一个玩具手风琴来学习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 你可以看到输出here

先谢谢

在AngularJS中制作手风琴

0 个答案: