0

Convert Angular HTTP.get function to a serviceに関する JM の 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 に答える