Javascript 如何修复不使用显式注释且无法在严格模式下调用的角度
我使用的是严格模式和角度1.4.7,我得到以下错误:Javascript 如何修复不使用显式注释且无法在严格模式下调用的角度,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我使用的是严格模式和角度1.4.7,我得到以下错误: Error: [$injector:strictdi] function($scope, $element, $attrs, mouseCapture) is not using explicit annotation and cannot be invoked in strict mode 生成的错误url为: $injector/strictdi?p0=函数($scope、%20$element、%20$attrs、%20mouseCa
Error: [$injector:strictdi] function($scope, $element, $attrs, mouseCapture) is not using explicit annotation and cannot be invoked in strict mode
生成的错误url为:
$injector/strictdi?p0=函数($scope、%20$element、%20$attrs、%20mouseCapture)
以下是服务
angular.module('mouseCapture', [])
//
// Service used to acquire 'mouse capture' then receive dragging events while the mouse is captured.
//
.factory('mouseCapture', function ($rootScope) {
//
// Element that the mouse capture applies to, defaults to 'document'
// unless the 'mouse-capture' directive is used.
//
var $element = document;
//
// Set when mouse capture is acquired to an object that contains
// handlers for 'mousemove' and 'mouseup' events.
//
var mouseCaptureConfig = null;
//
// Handler for mousemove events while the mouse is 'captured'.
//
var mouseMove = function (evt) {
if (mouseCaptureConfig && mouseCaptureConfig.mouseMove) {
mouseCaptureConfig.mouseMove(evt);
$rootScope.$digest();
}
};
//
// Handler for mouseup event while the mouse is 'captured'.
//
var mouseUp = function (evt) {
if (mouseCaptureConfig && mouseCaptureConfig.mouseUp) {
mouseCaptureConfig.mouseUp(evt);
$rootScope.$digest();
}
};
return {
//
// Register an element to use as the mouse capture element instead of
// the default which is the document.
//
registerElement: function(element) {
$element = element;
},
//
// Acquire the 'mouse capture'.
// After acquiring the mouse capture mousemove and mouseup events will be
// forwarded to callbacks in 'config'.
//
acquire: function (evt, config) {
//
// Release any prior mouse capture.
//
this.release();
mouseCaptureConfig = config;
//
// In response to the mousedown event register handlers for mousemove and mouseup
// during 'mouse capture'.
//
$element.mousemove(mouseMove);
$element.mouseup(mouseUp);
},
//
// Release the 'mouse capture'.
//
release: function () {
if (mouseCaptureConfig) {
if (mouseCaptureConfig.released) {
//
// Let the client know that their 'mouse capture' has been released.
//
mouseCaptureConfig.released();
}
mouseCaptureConfig = null;
}
$element.unbind("mousemove", mouseMove);
$element.unbind("mouseup", mouseUp);
},
};
})
//
// Directive that marks the mouse capture element.
//
.directive('mouseCapture', function () {
return {
restrict: 'A',
controller: function($scope, $element, $attrs, mouseCapture) {
//
// Register the directives element as the mouse capture element.
//
mouseCapture.registerElement($element);
},
};
})
;
如何修复此错误代码显示:
$1:strictdi
依赖项注入出现错误
在有关此错误的文档中:
每当服务试图使用隐式注释时,Strict模式就会抛出错误
您应该尝试切换到:
.factory('mouseCapture', ['$rootScope', function ($rootScope) {...}]);
语法,无论何时处于严格模式。看起来您需要在字符串数组中声明所有依赖项注入
还有其他方法,但通常我会这样做:
controller: ['$scope', '$element', '$attrs', 'mouseCapture',
function($scope, $element, $attrs, mouseCapture) {
...
}
]
controller: MouseCaptureController,
...
MouseCaptureController.$inject = ['$scope', '$element', '$attrs', 'mouseCapture'];
function MouseCaptureController($scope, $element, $attrs, mouseCapture) {
...
}
我们这样做的原因之一是,当我们尝试缩小此js文件时,变量名将减少到一个或两个字符,DI需要确切的名称来查找服务。通过在字符串数组中声明DI,angular可以将服务与其缩小的变量名相匹配。因此,字符串数组和函数参数需要XACT在数量和顺序上匹配
更新: 如果您正在进行以下操作,您应该这样做:
controller: ['$scope', '$element', '$attrs', 'mouseCapture',
function($scope, $element, $attrs, mouseCapture) {
...
}
]
controller: MouseCaptureController,
...
MouseCaptureController.$inject = ['$scope', '$element', '$attrs', 'mouseCapture'];
function MouseCaptureController($scope, $element, $attrs, mouseCapture) {
...
}
只需在构造函数的第一行添加“
'nginjet”
。添加“nginjet”对我来说是有效的答案。事实上,我正在使用带有angularjs的typescript,并在构造函数执行此操作之前添加“/@nginjet/”。谢谢,但这还不够。我还需要在控制器中添加符号@lcycool显示完全正确。您应该在任何存在依赖项注入且使用严格模式的地方使用此显式语法。这也适用于我的指令:)我假设它适用于任何提供商(例如,服务、工厂)一个问题,如何找到哪个服务是罪魁祸首?在我的场景中,Angular显示了一个只填充Angular方法调用的调用堆栈。我找不到什么服务。@SaeedNeamati通常角度错误与https://docs.angularjs.org/error/...
,单击内部并阅读错误消息。有时候真正的错误是里面有几层。是的,我知道。但是,当我单击它时,整个调用堆栈都与anguarjs相关。我不知道是哪一部分代码把我带到这里来的。@SaeedNeamati有时在无法解析模板时无法显示有意义的错误。或者你可以在这里粘贴你的错误链接?对于像我这样的其他人,我遇到了这个问题,因为我使用的是Angular Batarang Chrome扩展的旧版本,它缺少注释。