Question

在阅读了几个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>

Answer 1

你可以做的一种方法是使用IIFE创建一个闭包变量，并在控制器外部保留http service的引用，并在控制器中使用它。

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

       }
   }]);

只需在控制器中注入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

Answer 2

我认为你可能会想得太多。如果需要从我们的（视图）html访问getData（），那么它应该附加到范围。

Answer 3

在您的用例中，我将使用注入器手册在闭包中保留对$ http的引用。

 var $http = angular.injector(['ng']).get('$http');

Here is an updated plunk。这样，您可以将私有内容保留在控制器中。

编辑：刚才注意到这与@PSL解决方案类似。对不起，我没有注意到他的第一个解决方案。但是，我带着手动注射器，所以如果你没关系，我会保留这个答案！ EDITEDIT：更新了plunker，使其更加可测试。

如何在不使用示波器的情况下引用控制器功能中的服务？

3 个答案: