gpt4 book ai didi

javascript - 我应该如何在不使用范围的情况下在我的 Controller 功能中引用服务?

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:17:01 26 4
gpt4 key购买 nike

看了几个articles关于避免范围汤和引用 Google Guidelines对于建筑 Controller ,我一直面临一个亟待解决的问题。我应该如何引用我的注入(inject)我的 Controller 中的依赖项?

到目前为止,我的方法是将服务放在我的对象上,但我对此并不十分满意,因为现在我的服务已暴露给外界(模板标记)。在不直接引用 $scope 的情况下构建 Controller 的正确方法是什么,并且我注入(inject)的依赖项可用于 Controller 但不公开公开。

正如您在下面看到的,我的解决方法是将 $http 放在“this”上,然后在我的原型(prototype)中引用它功能。由于上述原因,这不是我的理想选择。

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 创建一个闭包变量,并在 Controller 外部保留对 http 服务 的引用,然后在 Controller 中使用它。

  (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);

})();

Plnkr

或者将属性添加到构造函数而不是其实例。

(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);
})();

Plnkr

这里是你如何显式注释你的依赖项(除非你使用 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
});

}
}]);

然后在 Controller 中注入(inject) 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]);

Plnk3

关于javascript - 我应该如何在不使用范围的情况下在我的 Controller 功能中引用服务?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26260444/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com