今天试着用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>