AngularJs directive-link实例

发布时间：2020-12-17 10:07:30 所属栏目：安全来源：网络整理

导读：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',[]);ap

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!