用AngularJS自定义指令写个开关demo

点击前

AngularJS自定义指令_css


点击后

AngularJS自定义指令_angularjs_02

<html ng-app='expanderModule'>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"
        <link rel="stylesheet" type="text/css" href="ExpanderSimple.css"/>
        <script src="framework/angular-1.3.0.14/angular.js"></script>
        <script src="ExpanderSimple.js"></script>
    </head>
    <body>
        <div ng-controller='SomeController'>//定义一个控制器
            <expander class='expander' expander-title='title'>{{text}}</expander>
            //定义一个expander指令
            //expander-title是利用angularJS的绑定策略
        </div>
    </body>
</html>

css

.expander {
    border:1px solid black;
    width:250px;
}

.expander>.title {
    background-color: black;
    color: white;
    padding:1em .3em;
    cursor: pointer;
}

.expander>.body {
    padding:1em .3em;
}

js

var expanderModule=angular.module('expanderModule', []);
expanderModule.directive('expander', function()
    return {
        restrict : 'EA',
        replace : true,
        transclude : true,
        scope : {
            title : '=expanderTitle'
        },
        template : '<div>'
                 + '<div class="title" ng-click="toggle()">{{title}}</div>'
                 + '<div class="body" ng-show="showMe" ng-transclude></div>'
                 + '</div>',
        link : function(scope, element, attrs)
            scope.showMe = false;
            scope.toggle = function()
                scope.showMe = !scope.showMe;
            }
        }
    }
});
expanderModule.controller('SomeController',function($scope)
    $scope.title = '点击展开';
    $scope.text = '这里是内部的内容。';
});