Question

我有2个自定义指令和一个控制器，它们都需要共享一些数据。以下内容无法编译。这样做的正确语法是什么？

flight-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

键入＆＃39; sea＆＃39; （无引号）在前2个文本框中，从弹出窗口中选择，选择出发日期，然后单击搜索按钮。请参阅错误，因为共享服务不可用。

Answer 1

试试这个：

＆＃13;

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

＆＃13;

Answer 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：在使用控制器的自定义指令之间共享工厂服务的正确语法是什么？

2 个答案: