CODEWITHSUNDEEP
javascriptangularjs
Raxit
Raxit

Reputation: 111

Angular Js scope.$apply does not work

I am new to angular js. I am trying out an example from http://egghead.io/lessons/angularjs-directives-talking-to-controllers but somehow it does not seem to work correctly for me.

here is my 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>

here is 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 problem is below statement seems to be failing and I can't figure out the reason since I did exactly the way it is done in demo. 

scope.$apply(attrs.enter)

I even tried following but error console displays loadMoreTweets is not found, any help is greatly appreciated. 

scope.loadMoreTweets()

Upvotes: 0

Views: 1300

Answers (1)

Wesley Yee
Wesley Yee

Reputation: 200

<div app-controller="AppCtrl">

should be

<div ng-controller="AppCtrl">

Upvotes: 2

Related Questions