AngularJS如何使用控制器为语法时注入依赖 [英] AngularJS How to inject dependencies when using controller-as syntax

问题描述

与控制器 - 如在文档中提到的功能，我返工我的控制器，以满足他们建议语法中的沿继。但我不知道如何注入$ http服务进入我的搜索（）函数，并在某种程度上，这将是从缩小安全吗？

  customer.RequestCtrl =功能（）{
                this.person = {};
                this.searching = FALSE;
                this.selectedInstitute = NULL;
                this.query = NULL;
                this.institutes = NULL;
};customer.RequestCtrl.prototype.search =功能（）{
        this.searching = TRUE;
        this.selectedInstitute = NULL;
        $ HTTP（{方法：GET，网址：'/ API /机构'，则params：{Q：this.query，最大：250}}）
                .success（功能（数据，状态，头，配置）{
                        this.searching = FALSE;
                        this.institutes =数据;
                }）
                .error（功能（数据，状态，头，配置）{
                        this.searching = FALSE;
                        this.institutes = NULL;
                }）;};
 

解决方案

只需在注入你的控制器构造函数，您可以将其连接到实例是，就像任何其他财产的属性。

  customer.RequestCtrl =功能（$ HTTP）{
                this.person = {};
                this.searching = FALSE;
                this.selectedInstitute = NULL;
                this.query = NULL;
                this.institutes = NULL;
                这$ HTTP = $ HTTP。 //或者可能与_ preFIX this._http = $ HTTP;
  };  。customer.RequestCtrl $注射='$ HTTP']; //明确标注  customer.RequestCtrl.prototype.search =功能（）{
    ...
    这个$ HTTP（{方法：GET，网址：'/ API /机构'，则params：{Q：this.query，最大：250}}）
    ...
 };
 

另一种方法是添加一个变量并运行控制器defenision在IIFE。

 （功能（客户）{   变量$ httpSvc;    customer.RequestCtrl =功能（$ HTTP）{
                    this.person = {};
                    this.searching = FALSE;
                    this.selectedInstitute = NULL;
                    this.query = NULL;
                    this.institutes = NULL;
                    $ httpSvc = $ HTTP;
    };    customer.RequestCtrl.prototype.search =功能（）{
           ...
            $ httpSvc（{方法：GET，网址：'/ API /机构'，则params：{Q：this.query，最大：250}}）
          ...
    }; angular.module（应用），控制器（'RequestCtrl'，['$ HTTP，customer.RequestCtrl]）;}）（顾客）;
 

Following along with the controller-as feature mentioned in the docs, I'm reworking one of my controllers to match the syntax they suggested. But I'm not sure how to inject the $http service into my search() function, and in a way that will be safe from minification?

customer.RequestCtrl = function () {
                this.person = {};
                this.searching = false;
                this.selectedInstitute = null;
                this.query = null;
                this.institutes = null;
};

customer.RequestCtrl.prototype.search = function() {
        this.searching = true;
        this.selectedInstitute = null;                 
        $http({method: 'GET', url: '/api/institutes', params: {q: this.query, max: 250}})
                .success(function(data, status, headers, config) {
                        this.searching = false;
                        this.institutes = data;                                                                        
                })
                .error(function(data, status, headers, config) {
                        this.searching = false;
                        this.institutes = null;
                });

};

解决方案

Just inject in your controller constructor, and you can attach it to the instance as a property just like any other property.

  customer.RequestCtrl = function ($http) {
                this.person = {};
                this.searching = false;
                this.selectedInstitute = null;
                this.query = null;
                this.institutes = null;
                this.$http = $http; //Or probably with _ prefix this._http = $http;
  };

  customer.RequestCtrl.$inject = ['$http']; //explicit annotation

  customer.RequestCtrl.prototype.search = function() {
    ...              
    this.$http({method: 'GET', url: '/api/institutes', params: {q: this.query, max: 250}})
    ...       
 };

Another way would be add a variable and run your controller defenision in an IIFE.

(function(customer){

   var $httpSvc;

    customer.RequestCtrl = function ($http) {
                    this.person = {};
                    this.searching = false;
                    this.selectedInstitute = null;
                    this.query = null;
                    this.institutes = null;
                    $httpSvc = $http;
    };

    customer.RequestCtrl.prototype.search = function() {
           ...          
            $httpSvc({method: 'GET', url: '/api/institutes', params: {q: this.query, max: 250}})
          ...
    };

 angular.module('app').controller('RequestCtrl', ['$http', customer.RequestCtrl]);

})(customer);

这篇关于AngularJS如何使用控制器为语法时注入依赖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！