Directive Controller Talking - Simple

When Directive has no problem talking to scope of passed element.

by Mayank Dixit

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<table ng-controller='myCtrl' border='1' ><tr>
    <td my-dir="loadMore()">Roll to load more</td>
    <td enter>Roll to load more2</td>
    <td enter-me="loadMore()">Roll to load more3</td></tr>
</table>

JavaScript

angular.module('myApp',[]).
controller('myCtrl', function($scope){
    $scope.loadMore = function(){
        console.log('Loading!!')
    }
}).
directive('myDir', function(){
    return function(scope, elem, attr){
        $(elem).on('mouseenter', function(){
            // parses string to fxn adn finds in 'scope'
            scope.$apply("loadMore()");
        })
    }
}).
directive('enter', function(){
    return function(scope, elem, attr){
        $(elem).on('mouseenter', function(){
            scope.loadMore();
        })
    }
}).

directive('enterMe', function(){
    return function(scope, elem, attr){
        $(elem).on('mouseenter', function(){
            scope.$apply(attr.enterMe);
        })
    }
})