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'> </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!
}
);
答案 0 :(得分:2)
你忘了注入$ compile:
angular.module('windows', ['windowinfo'])
.directive('rrwin', ['$compile', 'WindowInfoService', function($compile, WindowInfoService)
{
...