今天试着用AngularJs写了点东西，感觉自己对isloated scope理解还是比较透彻的，但是写代码的时候却碰到一个问题，浪费了我1个小时的时间，最终找到原因，是。。。（见文末），先看代码：
可以在线运行：http://plnkr.co/edit/hzm9nG?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.2.8" data-semver="1.2.8" src="http://code.angularjs.org/1.2.8/angular.js"></script>
<script>
var app = angular.module("badApp", []);
app.controller("AppCtrl", function($scope) {
$scope.toggleContent = function() {
alert("OK")
}
})
app.directive("collapseButton", function() {
return {
scope: {
toggleContent: "&"
},
template: '<button ng-click="toggleContent()">Good</button>'
}
});
</script>
</head>
<body>
<div ng-app="badApp">
<div ng-controller="AppCtrl">
<div collapse-button="" toggleContent="toggleContent()"></div>
</div>
</div>
</body>
</html>
由于HTML的属性写错了，不应该写成驼峰命名法，而是应该全小写，然后用-相连！也就是
<div collapse-button toggle-content="toggleContent()"></div>