AngularJs directive-link实例

天马3798

于 2016-06-09 18:13:41 发布

阅读量820

点赞数

分类专栏： AngularJs 文章标签： AngularJs directive

本文链接：https://blog.csdn.net/u011127019/article/details/51622301

版权

AngularJs 专栏收录该内容

55 篇文章 3 订阅

订阅专栏

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

优惠劵

天马3798

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJs directive-link实例

1.代码：中间内容部分 --> var app = angular.module('myApp', []);app.directive('myExpander', function () { return { restrict: 'E', replac
复制链接

扫一扫