在Angularjs中将服务作为控制器函数的参数传递

我在Angular应用程序的单独文件中有控制器、视图和服务。这些文件是：

home.controller.js

angular
    .module('loc8rApp')
    .controller('homeCtrl', homeCtrl);

function homeCtrl () {
    var vm = this;
    vm.pageHeader = {
        title: 'Loc8r',
        strapline: 'Find places to work with wifi near you'
    };
}

angular
    .module('loc8rApp')
    .service('loc8rData', loc8rData);

var loc8rData = function ($http) {
    var locationByCoords = function (lat, lng) {
        return $http.get('/api/locations?lng=' + lng + '&lat=' + lat + '&maxDistance=10000');
    };
    return {
        locationByCoords: locationByCoords
    };
};

home.view.html

<div id="banner" class="page-header">
  <div class="row">
    <div class="col-lg-6"></div>
    <h1>
      {{ vm.pageHeader.title }}
      <small>{{ vm.pageHeader.strapline }}</small>
    </h1>
  </div>
</div>

带有home.controller.js和home.view.html的应用程序正常。现在我想使用在loc8rData.service.js文件中定义的服务loc8rData。为了使用来自控制器的服务，我将服务名称作为homeCtrl函数的参数传递。然后它制造了一个问题。它显示的是角度表达式，而不是该表达式的值。下图最适合观察问题：

---

背后的原因是什么？正确的解决方案是什么？

您需要将服务注入控制器，如下所示：

 homeCtrl.$inject = ['loc8rData'];
 function homeCtrl (loc8rData) {

 }

还可以按如下方式更改您的服务功能，使其在全球范围内可访问

angular
    .module('loc8rApp')
    .service('loc8rData', loc8rData);

function loc8rData($http) {
    var locationByCoords = function (lat, lng) {
        return $http.get('/api/locations?lng=' + lng + '&lat=' + lat + '&maxDistance=10000');
    };
    return {
        locationByCoords: locationByCoords
    };
};

---

显示您是如何注入服务的我刚刚将服务包括到angular应用程序中，这是loc8rData.service.js文件的第一条语句。是否足够？您需要将服务注入控制器如何将服务注入控制器？我刚刚将服务名称作为参数传递给控制器函数。在哪个位置？就在控制器功能之前？我已经这样做了，但它仍然显示出一种表情：（是的，实际上很多）