1.代码:
<body ng-app="myApp" > <my-expander title="标题部分"> <h5>中间内容部分</h5> </my-expander> <!--<div class="panel panel-primary" > <div class="panel-heading"></div> <div class="panel-body"></div> </div>--> <script> </body>
var app = angular.module('myApp',[]); app.directive('myExpander',function () { return { restrict: 'E',replace: true,transclude: true,scope: { title:'@' //如果使用= 双向绑定失败,因为replace=true 原始标签的title会被删除 },template: '<div class="panel panel-primary" >' + ' <div class="panel-heading" ng-click="toggle()">{{title}}</div>' + '<div class="panel-body" ng-show="showMe" ng-transclude></div>',link: function (scope,element,attrs) { scope.showMe = false; scope.toggle = function toggle() { scope.showMe = !scope.showMe; if (scope.showMe) { scope.title = '点击关闭'; } else { scope.title = '点击展开'; } } } } });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。