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>'
这里面包裹着这样我这个例子 我就没有疑问了