0

JM 在Convert Angular HTTP.get function to a service上的 SO 帖子是我迄今为止看到的最好的总结并解释了很多。但是......虽然我的服务在控制器内工作，但我无法在指令中访问它。

“只是注入它”可能是答案，但由于服务是“未定义”，我的指令中对服务的调用仍然失败

我正在写一个窗口管理器。' ... stuff here ... ' 是一个指令。

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

1 回答 1

2

你忘了注入 $compile：

angular.module('windows', ['windowinfo'])
 .directive('rrwin', ['$compile', 'WindowInfoService', function($compile, WindowInfoService)
 { 
  ...
于 2012-12-30T17:00:26.617 回答