I recently started learning angular js and decided to test an example from . However, I am experiencing some difficulty as it does not seem to be functioning correctly.
Below is the HTML code I am using:
<!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>
Here are the specified app, controller, and directive:
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);
})
}
})
The issue lies with the following statement which seems to be failing, although I have followed the demo instructions accurately:
scope.$apply(attrs.enter)
Even after attempting the alternative method mentioned below, the error console still indicates that "loadMoreTweets" is not found. Any assistance on this matter would be greatly appreciated.
scope.loadMoreTweets()