Skip to content

Instantly share code, notes, and snippets.

@wulymammoth
Created April 15, 2014 17:15
Show Gist options
  • Select an option

  • Save wulymammoth/10748992 to your computer and use it in GitHub Desktop.

Select an option

Save wulymammoth/10748992 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Directives Talking to Controllers</title>
</head>
<div ng-app="twitterApp">
<div ng-controller="AppController">
<!-- <div enter="loadMoreTweets()">Roll over to load more tweets</div> -->
<div enter="deleteTweets()">Roll over to load more tweets</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.3/angular.min.js"></script>
<script>
var app = angular.module('twitterApp', []);
app.controller('AppController', function($scope) {
$scope.loadMoreTweets = function() {
alert("Loading tweets!");
};
$scope.deleteTweets = function() {
alert("Deleting tweets!");
};
});
app.directive('enter', function() {
return function(scope, element, attrs) {
element.bind('mouseenter', function(){
/* Access to $scope with `scope` param: */
// below assumes this `scope` is working with
// AppController's $scope (bound -- no good)
// scope.loadMoreTweets();
/* Alternate solution: */
// parses the string, searches for it on the $scope,
// and then invokes it
scope.$apply(attrs.enter);
});
};
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment