angular-directive（组件化）

base.js

var myApp = angular.module('helloworld', []);
myApp.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 toggle() {
                scope.showMe = !scope.showMe;
            }
        }
    }
});

html

这里的代码需要ng-app的包裹才会生效
大家自己加

 <expander class='expander' expander-title='title'>
        {{text}}
    </expander>

这里的{{text}}为何会插入到'<div class="body" ng-show="showMe" ng-transclude></div>'这里面 我很好奇啊搜了一下 哈哈
找到了这句话`
directive包含的内容会放在ng-transclude标示的元素中，transclude要配合ng-transclude使用 所以啦这里的 {{text}}最终会在

'<div class="body" ng-show="showMe" ng-transclude></div>'

这里面包裹着这样我这个例子 我就没有疑问了