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

Question

我在 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'
    };
}

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>

loc8rData.service.js

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.controller.js和home.view.html的应用就可以了。现在我想使用在 loc8rData.service.js 文件中定义的服务 loc8rData 。为了从控制器使用服务，我将服务名称作为 homeCtrl 函数的参数传递。然后它创建了一个问题。它显示 angular 表达式而不是该表达式的值。下图最适合观察问题：

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

Answer 1

您需要按如下方式将服务注入控制器，

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

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

Passing service as a parameter of controller function in Angularjs

angularjs

angularjs-service

angularjs-controller