私はAngular jsが初めてです。http://egghead.io/lessons/angularjs-directives-talking-to-controllersの例を試していますが、どういうわけか正しく動作しないようです。
ここに私のhtmlがあります
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="js/twitterApp.js"></script>
</head>
<body>
<div ng-app="twitterApp">
<div app-controller="AppCtrl">
<div enter="loadMoreTweets()">Roll over to load tweets.</div>
</div>
</div>
</body>
</html>
ここにアプリ、コントローラー、ディレクティブがあります
var tApp= angular.module("twitterApp",[])
tApp.controller("AppCtrl", function ($scope) {
$scope.loadMoreTweets = function () {
alert('Loading tweets.');
}
})
tApp.directive("enter", function () {
return function (scope, element, attrs) {
element.bind("mouseenter", function () {
scope.$apply(attrs.enter);
})
}
})
問題は以下のステートメントです。失敗しているようです。デモで行ったのとまったく同じように行ったので、理由がわかりません。
scope.$apply(attrs.enter)
私も以下を試してみましたが、エラーコンソールにはloadMoreTweetsが見つからないと表示されます。どんな助けも大歓迎です。
scope.loadMoreTweets()