错误：[ng:areq] 参数 'searchCtrl' 不是函数，未定义

Question

我正在尝试让 ui-router 工作，而且我已经非常接近了。好吧，我让它工作了，但我无法将它与我的控制器结合起来，然后我得到了错误。

我在控制台中收到此错误

Error: [ng:areq] Argument 'searchCtrl' is not a function, got undefined

searchCtrl.js

var myApp = angular.module('myApp')

  .controller('searchCtrl', [

    '$scope', '$http', function($scope, $http) {

      $scope.search = function() {

        var base = 'http://api.themoviedb.org/3';
        var service = '/search/movie';
        var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&query='
        var search = $scope.searchquery
        var callback = 'JSON_CALLBACK'; // provided by angular.js
        var url = base + service + '?api_key=' + apiKey + search + '&callback=' + callback;

        $http.jsonp(url,{ cache: true}).
          success(function (data, status, headers, config) {

            if (status == 200) {
              $scope.movieList = data.results;
              console.log($scope.movieList)
            } else {
              console.error('Error happened while getting the movie list.')
            }

          }).
          error(function (data, status, headers, config) {
            console.error('Error happened while getting the movie list.')
          });
      }

    }
]);

我的 searchModule.js

var app = angular.module('movieseat', ['ui.router']).config([

  '$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/state1');
    return $stateProvider.state('state1', {
      url: '/state1',
      templateUrl: 'assets/angular-app/templates/state1.html'
    });
  }

]);

还有我的 app.js.coffee

@app    = angular.module('movieseat', []);
@myApp  = angular.module('myApp',[]);

# for compatibility with Rails CSRF protection

@app.config([
  '$httpProvider', ($httpProvider)->
    $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
])

@app.run(->
  console.log 'angular app running'
)

This might be the same question 并且我尝试将另一个模块添加到我的 app.js.coffee 但它不起作用。

有人给点小费吗？

Answer 1

如下更改 app.js.coffee 的前两个模块声明行。

@myApp  = angular.module('myApp',[]);    
@app    = angular.module('movieseat', ['myApp','ui.router']);

然后在 searchModule.js

angular.module('movieseat').config([

  '$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/state1');
    return $stateProvider.state('state1', {
      url: '/state1',
      templateUrl: 'assets/angular-app/templates/state1.html'
    });
  }

]);

原因：这里你基本上覆盖了你之前创建的模块，你只需要使用已经声明的模块。

如果你使用的是单个模块，那么

@app    = angular.module('movieseat', ['myApp','ui.router']);

# for compatibility with Rails CSRF protection

@app.config([
  '$httpProvider', ($httpProvider)->
    $httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content')
])

@app.run(->
  console.log 'angular app running'
)

和

angular.module('movieseat').config([

  '$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/state1');
    return $stateProvider.state('state1', {
      url: '/state1',
      templateUrl: 'assets/angular-app/templates/state1.html'
    });
  }

]);

你的控制器看起来像

angular.module('movieseat')

  .controller('searchCtrl', [

    '$scope', '$http', function($scope, $http) {

      $scope.search = function() {

        var base = 'http://api.themoviedb.org/3';
        var service = '/search/movie';
        var apiKey = 'a8f7039633f2065942cd8a28d7cadad4&query='
        var search = $scope.searchquery
        var callback = 'JSON_CALLBACK'; // provided by angular.js
        var url = base + service + '?api_key=' + apiKey + search + '&callback=' + callback;

        $http.jsonp(url,{ cache: true}).
          success(function (data, status, headers, config) {

            if (status == 200) {
              $scope.movieList = data.results;
              console.log($scope.movieList)
            } else {
              console.error('Error happened while getting the movie list.')
            }

          }).
          error(function (data, status, headers, config) {
            console.error('Error happened while getting the movie list.')
          });
      }

    }
]);