AngularJS: 在自定义指令中与控制器共享工厂服务的正确语法是什么？

Question

我有 2 个自定义指令和一个控制器，它们都需要共享一些数据。以下不编译。执行此操作的正确语法是什么？

航班-service.js（共享）：

(function() {
  var app = angular.module('flight-service', []);

  app.factory('flightService', function() {
    return {
      srcAirport: '',
      destAirport: '',
      departureDt: '',
      arrivalDt: ''
    }
  })
})();

旅行-dt.js:

(function() {
  var app = angular.module('travel-dt', ['ui.bootstrap', 'flight-service']);

  app.directive('travelDt', ['flightService', function(flightService) {
    var travelDtCtrl = ['$scope',
      function($scope, flightService) {
        $scope.flight = flightService;

 ... more stuff

机场-search.js:

(function() {
  var app = angular.module('airport-search', ['ui.bootstrap', 'flight-service']);

  app.directive('airportSearch', ['flightService', function(flightService) {
    var airportSearchCtrl = ['$http', '$scope', '$log',
      function($http, $scope, $log) {
        $scope.flight = flightService;

... more stuff

app.js:

(function() {
  var app = angular.module('travelApp', ['airport-search', 'travel-dt', 'flight-service']);

  app.controller('FlightSearchCtrl', [
    '$scope', '$http', 'flightService',
    function($scope, $http, $filter, flightService) {
      $scope.flight = flightService;

... more stuff

index.html:

<script src="js/app.js"></script>
<script src="js/airport-search.js"></script>
<script src="js/travel-dt.js"></script>
<script src="js/flight-service.js"></script>

错误：

Uncaught SyntaxError: Unexpected token .
travel-dt.js:45 Uncaught SyntaxError: Unexpected token .
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module travelApp due to:
Error: [$injector:modulerr] Failed to instantiate module airport-search due to:
Error: [$injector:nomod] Module 'airport-search' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.4.7/$injector/nomod?p0=airport-search
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:68:12
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js:1986:17

编辑 1：

按照建议对 index.html 中的 JS 导入进行重新排序，并如下重构 airport-search.js 后，我现在收到如下错误。我认为 scope: {...} 是可疑的，尽管我不知道如何更正它。

TypeError: definition.match is not a function
    at angular.js:6982
    at forEach (angular.js:350)
    at parseIsolateBindings (angular.js:6981)
    at parseDirectiveBindings (angular.js:7015)

机场-search.js:

(function() {
  var app = angular.module('airport-search', ['ui.bootstrap', 'flight-service']);

  app.directive('airportSearch', function() {
    var airportSearchCtrl = ['$http', '$scope', '$log', 'flightService',
      function($http, $scope, $log, flightService) {
        $scope.flight = flightService;

        $scope.findAirports = function(val) {
          return $http.get('airports', {
            params: {
              searchTerm: val
            }
          }).then(function(searchResults) {
            return searchResults.data.map(function(airport) {
              return airport;
            });
          }).catch(function(searchResults) {
            $log.error(searchResults);
          });
        };
      }];

    return {
      restrict: 'E',
      templateUrl: 'pages/airport-search.html',
      scope: {
        flight: {
          srcAirport: '=',
          destAirport: '='
        }
      },
      controller: airportSearchCtrl
    };
  });
})();

编辑 2：

机场-search.html:

<div class="row search-label">
    <div ng-show="loadingAirports" class="col-md-6">
        <i class="glyphicon glyphicon-refresh"></i> Searching...
    </div>
    <div ng-show="noResults" class="col-md-6">
        <i class="glyphicon glyphicon-remove"></i> No Results Found
    </div>
</div>
<div class="row search-panel">
    <div class="col-md-6" ng-repeat="model in [srcAirport, destAirport] track by $index">
        <pre>Model: {{model | json}}</pre>
        <p class="input-group">
            <input type="text" class="form-control search-box" ng-model="model"
                   uib-typeahead="airport as airport.name for airport in findAirports($viewValue)"
                   typeahead-min-length="3" typeahead-loading="loadingAirports" typeahead-no-results="noResults">
        </p>
    </div>
</div>

编辑 3：

Live Plunker example

在前 2 个文本框中键入 'sea'（w/o 引号），从弹出窗口中选择出发日期，然后单击搜索按钮。看到错误，因为共享服务不可用。

Answer 1

试试这个：

<script src="js/airport-search.js"></script>
<script src="js/travel-dt.js"></script>
<script src="js/flight-service.js"></script>
<script src="js/app.js"></script>

Answer 2

你有 2 个错误，实际上在错误本身中有一些解释。

第一个：travel-dt.js:45 Uncaught SyntaxError: Unexpected token . 很难说出确切的行号，但是查看提供的代码，在指令函数内声明的控制器变量缺少一个飞行服务的缩小安全。它应该是这样的

var travelDtCtrl = ['$scope', 'flightService',
      function($scope, flightService) {
        $scope.flight = flightService;

现在我不确定这是否是实际的语法错误。但这看起来仍然是错误的。您应该查看第 45 行，看看那里可能有什么样的 Unexpected token。即一些错位的字符。

第二个：angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module travelApp

所以这是因为您正试图通过注入其他尚不存在的模块来实例化 travelApp。按照您需要的顺序放置 js 文件：

<script src="js/flight-service.js"></script>
<script src="js/airport-search.js"></script>
<script src="js/travel-dt.js"></script>
<script src="js/app.js"></script>

AngularJS: 在自定义指令中与控制器共享工厂服务的正确语法是什么？

AngularJS: What's the correct syntax to share a factory service among custom directives with controllers?

angularjs

angularjs-directive

angularjs-service

angularjs-controller

angularjs-factory