AngularJs directive-link实例

来源：互联网发布：qq飞车堕落天使数据编辑：程序博客网时间：2024/05/29 07:09

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 = '点击展开';                }            }        }    }});

0 0