模板代码

文章作者:w88手机版登录网络 上传时间:2019-07-04

主页面代码(开掘Bootstrap官方网站络手风琴的实例样式反常,在此间依旧选择3.0.~版本)

<!DOCTYPE html>  <html ng-app="ct">  <head lang="en">      <meta charset="UTF-8">      <title></title>      <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.css"/>      <link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap-r.css"/>  </head>  <body>  <hr>  <div class="container" ng-controller="c1">      <kittencup-group>          <kittencup-collapse ng-repeat="collapse in Data" head="collapse.a">                        </kittencup-collapse>      </kittencup-group>  </div>  </body>  <script src="../angular.js"></script>  <script>      var app = angular.module("ct",[]);      app.factory("Data",function(){           return [               {                   a:"错你妹啊",                   b:"contents1"               },               {                   a:"title2",                   b:"contents2"               }           ]       });      app.controller("c1",['$scope','Data', function($scope,Data){          //由ctrl拿到数据加载给view          $scope.Data = Data;      }]);      app.directive('kittencupGroup', function(){           return {               restrict:"EA",               transclude:true,               replace:true,               template:"<div  ng-transclude></div>",               controller:function(){                   this.collapseGroup = [];                   this.otherClose = function(currCollaps){                       angular.forEach(this.collapseGroup, function(collaps){                           if(collaps !== currCollaps){                               collaps.isOpen = true;                           }                       });                   }               }           }      });      app.directive('kittencupCollapse', function(){          return {              restrict:"EA",              require:"^kittencupGroup",              replace:true,              templateUrl:"templates/contents.html",              transclude:true,              scope:{                  head:"="              },              link: function(scope, elements, attrs, superCtrl){                  scope.isOpen = true;                  scope.open = function(){                      scope.isOpen = !scope.isOpen;                      superCtrl.otherClose(scope);                  };                  superCtrl.collapseGroup.push(scope);              }          }      });  </script>  </html>

模板代码:

<div class="panel panel-default">      <div class="panel-heading" ng-click="open()">          <h4 class="panel-title">              <a href="#collapseOne">                                </a>          </h4>      </div>      <div class="panel-collapse" ng-class="{collapse: isOpen}">          <div class="panel-body" ng-transclude>          </div>      </div>  </div>

 


本文由w88手机版登录-www.w88zhan.com-优德w88app官方登录发布于w88手机版登录网络,转载请注明出处:模板代码

关键词: