Can't access Service inside compile section of directive

Question

JM's SO posting on Convert Angular HTTP.get function to a service is the best summary I've seen so far and explains a lot. But... although my service works inside the controller, I cannot access it within the Directive.

"Just inject it" is probably the answer, but still calls to the service inside my directive fail since the service is 'undefined'

I'm writing a window manager. The ' ... stuff here ... ' is a directive.

The WindowInfoService tracks information about each window (name & position for now). When dragging a window, the directive should notify the WindowInfoService of the new location.

Accessing WindowInfoService works from the controller, but not the directive.... Anyone know how to solve this problem? I'm totally stuck.

The App Definition

var RR = angular.module('roadrunner', 
['login', 'launcher', 'ui.directives', 'authentication', 
'current-user', 'windows', 'windowinfo']);

Here's the Directive

/* *** WINDOW MANAGER *** */

angular.module('windows', ['windowinfo'])
.directive('rrwin', ['WindowInfoService', function($compile, WindowInfoService)
{
    console.log('in directive');
    var template =  "<div class='win win-base' ui-jq='draggable' "
                    + "ui-options='{handle: " + '".win-titlebar"' + "}'>"
                    +   "   <div class='win-titlebar ui-dialog-titlebar ui-widget-header'>"
                    +   "       <span class='win-title'>{{wa.name}}</span>"
                    +   "       <div role='button' class='win-close'>"
                    +   "           <span class='win-close-icon'>&nbsp;&nbsp;</span>"
                    +   "       </div>"
                    +   "   </div>"
                    +   "   <div class='win-content' ng-transclude>"
                    +   "   </div>"
                    +   "</div>";

    var directive =
    {
        restrict: 'E',
        scope: { wa: '=winAttrs' },  // localName: html-attr-name
        transclude: true,
        compile: function (tElement, tAttr, transclude)
        {
            tElement.html(template);
            return function (scope, element, attr)
            {
                console.log('inner fcn');
                var inner = $(element).children();
                $(inner).css('top', scope.wa.top);
                $(inner).css('left', scope.wa.left);
                $(inner).css('width', scope.wa.width);
                $(inner).css('height', scope.wa.height);

                element.on("dragstop", function (event) 
                {
                    console.log('stop');
                    console.log(event.pageX, event.pageY);
                    var winElem = $(event.srcElement).parent();
                    var h = parseInt($(winElem).css('height'));
                    var w = parseInt($(winElem).css('width'));
                    var t = parseInt($(winElem).css('top'));
                    var l = parseInt($(winElem).css('left'));

                    // this doesn't work!
                    console.log(WindowInfoService.getAllInfo());
                    WindowInfoService.setInfo({ w: w, h: h, t: t, l: l })
                });
            }
        }
    }
    return directive;
}])
.controller(
    "windowMgrController",
    function ($scope, $location, WindowInfoService)
    {
        console.log('windowMgrController');
        $scope.windowList = WindowInfoService.getAllInfo(); // this works!
    }
);

Answer 1

You forgot to inject $compile:

angular.module('windows', ['windowinfo'])
 .directive('rrwin', ['$compile', 'WindowInfoService', function($compile, WindowInfoService)
 { 
  ...