在阅读了几个关于避免范围汤的
articles并参考了建筑控制器的
Google Guidelines之后,我留下了一个问题.我应该如何参考我注射的
我的控制器内的依赖?
到目前为止,我的方法是将服务放在我的对象上,但我对此并不完全满意,因为现在我的服务暴露给外部世界(模板标记).
在没有直接引用$scope的情况下构建控制器的正确方法是什么,并且我的注入依赖项可用于控制器但不公开公开.
正如你在下面看到的,我的工作是将$http放在’this’上然后在我的prototyped中引用它
功能.由于上述原因,不是我理想的选择.
http://plnkr.co/edit/Tn6Jkk06Zdu92uTM0UdU?p=preview
DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.3.0-rc2" src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="textController as txtCtrl">
<h1>{{txtCtrl.greeting}}</h1>
<button ng-click="txtCtrl.getData()">Get Names</button>
<hr>
{{txtCtrl.names | json}}
<script>
var textController = function($http){
this.greeting="Hello World";
this.$http = $http;
}
textController.prototype.alert = function(){
alert(this.greeting);
}
/*retrieve test data from //filltext.com*/
textController.prototype.getData = function(){
var that = this;
this.$http({
method: 'GET',
url: 'http://www.filltext.com/?rows=10&fname={firstName}&lname={lastName}'
})
.success(function(data){
that.names=data;
})
.error();
}
angular.module("app",[])
.controller("textController",textController);
angular.bootstrap(document,["app"]);
</script>
最佳答案 您可以做的一种方法是使用IIFE创建一个闭包变量,并在控制器外部保留http服务的引用,并在控制器中使用它.
(function(){
var _$http; //<-- Here a private variable
......
/*retrieve test data from //filltext.com*/
textController.prototype.getData = function(){
var that = this;
_$http({ //<-- Use it
method: 'GET',
url: 'http://www.filltext.com/?rows=10&fname={firstName}&lname={lastName}' })...
//...
}
angular.module("app").controller("textController",textController);
})();
或者将属性添加到构造函数而不是其实例.
(function(){
var textController = function($http){
this.greeting="Hello World";
textController._$http = $http; //<-- Here set it
}
//....
/*retrieve test data from //filltext.com*/
textController.prototype.getData = function(){
var that = this;
textController._$http({ //<-- Use it
method: 'GET',
url: 'http://www.filltext.com/?rows=10&fname={firstName}&lname={lastName}'})...
//...
}
//...
angular.module("app").controller("textController",textController);
})();
以下是如何显式注释依赖项(除非你使用ng-annotate将在缩小时使用它)
angular.module("app").controller("textController",['$http', 'blah', textController]);
要么
textController.$inject = ['$http', 'blah'];
但是,我只是负责将ajax调用和任何数据映射到服务: –
例:-
angular.module("app").service('UserService', ['$http', function($http){
this.getUsers = function(searchObj){ //Get the input and set your url
return $http({
method: 'GET',
url: 'http://www.filltext.com/?rows=10',
params: searchObj //<-- Pass params
});
}
}]);
然后在控制器中注入userService.
var textController = function(userSvc){
this.greeting="Hello World";
this.userSvc = userSvc;
}
....
/*retrieve test data from //filltext.com*/
textController.prototype.getData = function(){
var that = this;
//Call service with argument
this.userSvc.getUsers({firstName:$scope.fn, lastName:$scope.ln}).success(function(data){
that.names=data;
})...;
}
....
angular.module("app").controller("textController",['UserService', textController]);