AngularJS自定义指令

来源：互联网发布：google picasa mac 编辑：程序博客网时间：2024/06/05 21:49

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

点击后

<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;}

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 = '这里是内部的内容。';});

0 0