无法访问指令编译部分内的Service

时间:2012-12-30 16:50:00

标签: angularjs

JM在Convert Angular HTTP.get function to a service上发布的帖子是迄今为止我见过的最佳摘要,并解释了很多。但是......虽然我的服务在控制器内部工作,但我无法在指令中访问它。

"Just inject it"可能就是答案,但仍然调用我的指令中的服务失败,因为服务是'undefined'

我正在写一个窗口管理器。 '......这里的东西......'是一个指令。

WindowInfoService跟踪有关每个窗口的信息(现在名称和位置)。拖动窗口时,该指令应通知WindowInfoService新位置。

访问WindowInfoService是从控制器工作,但不是指令....任何人都知道如何解决这个问题?我完全陷入了困境。

应用定义

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

这是指令

/* *** 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!
    }
);

1 个答案:

答案 0 :(得分:2)

你忘了注入$ compile:

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