【发布时间】：2016-01-19 11:34:43
【问题描述】：
我阅读了$cookies at this link 的文档，它建议使用以下语法注入$cookies：
angular.module('cookiesExample', ['ngCookies'])
.controller('ExampleController', ['$cookies', function($cookies) {
因此，我尝试使用以下语法将 $cookies 注入服务（请注意以下 factory 而不是 controller：
angular.module('auth', ['ngCookies'])
.factory( 'auth', '$cookies', function($rootScope, $http, $location, $cookies) {
但结果是 FireFox 中出现了一个模糊的编译错误，导致应用无法编译。错误是在angular-bootstrap.js 中包含数万个字符，并且无法访问，因为angular-bootstrap.js 被压缩为每行可能包含 10,000+ 个字符的 20 行。由于angular-bootstrap.js 没有被修改，我假设错误出现在我的应用程序代码中，上面显示了唯一更改的行。
然后我通过尝试以下注入 $cookies 的语法解决了编译错误：
angular.module('auth', ['ngCookies'])
.factory( 'auth', function($rootScope, $http, $location, $cookies) {
结果是 FireFox 给出了一个不同的编译错误，指出 $cookies.get 不是函数，在以下代码行触发：
authenticated1 : $cookies.get('AUTH1'),
对我来说，这表明 $cookies 没有正确插入。
最后，我在angular-bootstrap.js 内部进行了关键字搜索，并确认有很多单词cookies 的实例，这意味着cookies api 在类路径中的那个文件中，因此问题出在似乎在用于将其插入服务的语法中。
那么我要对上面的代码进行哪些具体更改才能将$cookies api 正确注入auth 服务？
持续努力：
根据@charlietfl 和@KenDev 的建议，我尝试对服务第一行的语法进行两项更改。这两个版本都会导致编译错误，指出$cookies.get is not a function。为了消除混淆，我将实际服务模块中的所有代码粘贴如下：
//angular.module('auth', ['ngCookies']).factory( 'auth', [ '$cookies', function($rootScope, $http, $location, $cookies) {
angular.module('auth', ['ngCookies']).factory('auth', ['$rootScope', '$http', '$location', '$cookies', function($rootScope, $http, $location, $cookies){
var auth = {
authenticated1 : $cookies.get('AUTH1'),
authenticated2 : $cookies.get('AUTH2'),
usrname : '',
loginPath : '/login',
logoutPath : '/logout',
homePath : '/checkpin',
path : $location.path(),
authenticate1 : function(credentials, callback) {
var headers = credentials && credentials.username ? {
authorization : "Basic " + btoa(credentials.username + ":" + credentials.password)
} : {};
$http.get('user', {
headers : headers
}).success(function(data) {
if (data.name) {
auth.authenticated1 = $cookies.get('AUTH1');
}
else {
// $cookies.put('AUTH1', 'no');
auth.authenticated1 = 'no';//$cookies.get('AUTH1');
}
callback && callback(auth.authenticated1);
}).error(function() {
// $cookies.put('AUTH1', 'no');
auth.authenticated1 = 'no';//$cookies.get('AUTH1');
callback && callback(false);
});
},
authenticate2 : function(funcJSON, callback) {
$http.post('/check-pin', funcJSON).then(function(response, $cookies) {
if(response.data.content=='pinsuccess'){
auth.authenticated2 = $cookies.get('AUTH2');
callback && callback(auth.authenticated2);
}else {
// $cookies.put('AUTH2', 'no');
auth.authenticated2 = 'no';//$cookies.get('AUTH2');
callback && callback(false);
}
});
},
clear : function() {
$location.path(auth.loginPath);
// $cookies.put('AUTH1', 'no');
auth.authenticated1 = 'no';//$cookies.get('AUTH1');
// $cookies.put('AUTH2', 'no');
auth.authenticated2 = 'no';//$cookies.get('AUTH2');
$http.post(auth.logoutPath, {}).success(function() { console.log("Logout succeeded");
}).error(function(data) { console.log("Logout failed"); });
},
init : function(homePath, loginPath, logoutPath) {
auth.homePath = homePath;
auth.loginPath = loginPath;
auth.logoutPath = logoutPath;
}
};
return auth;
}]);
请注意，我在以下第一行中分别尝试了上述两次：
angular.module('auth', ['ngCookies']).factory( 'auth', [ '$cookies', function($rootScope, $http, $location, $cookies) {
and then separately:
angular.module('auth', ['ngCookies']).factory('auth', ['$rootScope', '$http', '$location', '$cookies', function($rootScope, $http, $location, $cookies){
然后我尝试了@gnerkis 的建议来更新 AngularJS 的版本。我注意到我的pom.xml 有org.webjars:angularjs 的1.3.8 版本，所以我在maven Central 中查找了最新版本，并在我的pom.xml 中将版本更改为1.4.8，然后输入mvn clean install -U 和mvn clean package -U紧随其后的是java -jar pathto/nameofjar.jar，但得到一个不同的编译错误，指出angular 未定义，并指向应用程序中每个控制器的第一个单词。然后，当我将应用程序恢复为1.3.8 时，我能够重新创建此正在进行的研究 部分开头所述的@charlietfl 和@KenDev 错误。
我还能尝试什么？
根据@gnerkus 的建议，我将index.html 发布如下：
<!doctype html>
<html>
<head>
<base href="/" />
<link href="css/angular-bootstrap.css" rel="stylesheet">
<style type="text/css">
[ng\:cloak], [ng-cloak], .ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="hello" ng-cloak class="ng-cloak">
<div ng-controller="navigation" class="container">
<ul class="nav nav-pills" role="tablist">
<li ng-class="{active:tab('home')}"><a href="/">home</a></li>
<li ng-class="{active:tab('message')}"><a href="/message">message</a></li>
<li ng-class="{active:tab('public1')}"><a href="/public1">public1</a></li>
<li ng-class="{active:tab('public2')}"><a href="/public2">public2</a></li>
<li ng-class="{active:tab('public3')}"><a href="/public3">public3</a></li>
<li ng-class="{active:tab('public4')}"><a href="/public4">public4</a></li>
<li ng-class="{active:tab('register')}"><a href="/register">register</a></li>
<li><a href="/login">login</a></li>
<li ng-show="authenticated2()"><a href="" ng-click="logout()">logout</a></li>
</ul>
</div>
<div ng-view class="container"></div>
<script src="js/angular-bootstrap.js" type="text/javascript"></script>
<script src="js/auth/auth.js" type="text/javascript"></script>
<script src="js/home/home.js" type="text/javascript"></script>
<script src="js/message/message.js" type="text/javascript"></script>
<script src="js/public1/public1.js" type="text/javascript"></script>
<script src="js/navigation/navigation.js" type="text/javascript"></script>
<script src="js/hello.js" type="text/javascript"></script>
</body>
</html>
【问题讨论】：
-
您为控制器和工厂执行的方式之间存在非常明显的语法差异。提示...
controller()和factory()各有 2 个参数 -
@charlietfl
factory代码工作直到我尝试注入cookies。我仍在学习 AngularJS，并且犹豫要修复没有损坏的东西。但是尝试注入$cookies破坏了它。 -
因为缺少大括号...看看差异...控制器语法正确...使工厂语法匹配。 factory() 有 3 个参数而不是两个
-
@charlietfl 请参阅我添加到 OP 末尾的代码，显示尝试您的建议的结果。还有其他意见吗？
-
@CodeMed，在 angular 1.3.x 中尝试使用
var favoriteCookie = $cookies['AUTH1'];
标签： javascript angularjs twitter-bootstrap cookies dependency-injection