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

时间:2015-08-11 11:20:49

标签: angularjs angular-ui-router

我正在努力让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中添加另一个模块,但它无效。

有人有小费吗?

1 个答案:

答案 0 :(得分:3)

更改 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.')
          });
      }

    }
]);