Fatal编程技术网

AngularJS:未调用控制器

angularjs

AngularJS:未调用控制器,angularjs,Angularjs,我有以下html文件 <!DOCTYPE html> {% load staticfiles %} <html lang="en-US"> <head> <script src="{% static 'bower_components/angular/angular.js' %}"></script> <script src="{% static 'bower_components/angular-route/angular-

我有以下html文件

<!DOCTYPE html>
{% load staticfiles %}

<html lang="en-US">

<head>
<script src="{% static 'bower_components/angular/angular.js' %}"></script>
<script src="{% static 'bower_components/angular-route/angular-route.js' %}"></script>
<script src="{% static 'js/hearthstone_guides/controllers.js' %}"></script>
<script src="{% static 'js/hearthstone_guides/app.js' %}"></script>
</head>
<body ng-app="guideApp">

<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello [[name]]</h1>

<div ng-view></div>

</body>

</html>
这是我的
controllers.js

var guideApp = angular.module('guideApp', ['ngRoute']);

guideApp
  .config([
    '$routeProvider',
    function($routeProvider) {
      $routeProvider
        .when('/guide/:guideId', {
          controller: 'GuideDetailController',
          templateUrl: '/static/templates/hearthstone_guides/guide-detail.html'
        })
        .otherwise({
          redirectTo: '/'
        });
    }
  ])

  .config([
    '$httpProvider', function($httpProvider) {
      $httpProvider.defaults.xsrfCookieName = 'csrftoken';
      $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
    }
  ])

  .config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
  });

var guideController = angular.module('guideController', []);

guideController.controller('GuideDetailController', [
  '$scope',
  '$routeParams',
  '$http',
  function($scope, $routeParams, $http) {
    $http.get('http://10.0.3.162:8000/api/guides/' + $routeParams.guideId + '/?format=json')
      .success(function(data) {
        console.log('success');
        $scope.guide = data;
      })
      .error(function(data, status) {
        console.error(status, data);
      });
  }
]);
当I
console.log（'foo'）例如介于
var guideController=angular.module（'guideController'，[]）之间和
guideController.controller（'GuideDetailController'，[…
它可以工作

不幸的是，
console.log（'success'）；
和
console.log（状态、数据）；
都不起作用

编辑：

我现在按照您的建议将控制器名称更改为
GuideDetailController
，但仍然不起作用

这是firefox开发者控制台中标记的错误：


"Error: [ng:areq] Argument 'GuideDetailController' is not a function, got undefined
http://errors.angularjs.org/1.3.20/ng/areq?p0=GuideDetailController&p1=not%20a                 nanunction%2C%20got%20undefined
minErr/<@http://10.0.3.162:8000/static/bower_components/angular/angular.js:63:12
assertArg@http://10.0.3.162:8000/static/bower_components/angular/angular.js:1590:1
assertArgFn@http://10.0.3.162:8000/static/bower_components/angular/angular.js:1600:1
$ControllerProvider/this.$get</<@http://10.0.3.162:8000/static/bower_components/angular/angular.js:8493:9
ngViewFillContentFactory/<.link@http://10.0.3.162:8000/static/bower_components/angular-route/angular-route.js:978:26
invokeLinkFn@http://10.0.3.162:8000/static/bower_components/angular/angular.js:8281:9
nodeLinkFn@http://10.0.3.162:8000/static/bower_components/angular/angular.js:7791:1
compositeLinkFn@http://10.0.3.162:8000/static/bower_components/angular/angular.js:7140:13
publicLinkFn@http://10.0.3.162:8000/static/bower_components/angular/angular.js:7019:30
createBoundTranscludeFn/boundTranscludeFn@http://10.0.3.162:8000/static/bower_components/angular/angular.js:7158:1
controllersBoundTransclude@http://10.0.3.162:8000/static/bower_components/angular/angular.js:7818:18
update@http://10.0.3.162:8000/static/bower_components/angular-route/angular-route.js:936:25
$RootScopeProvider/this.$get</Scope.prototype.$broadcast@http://10.0.3.162:8000/static/bower_components/angular/angular.js:14889:15
commitRoute/<@http://10.0.3.162:8000/static/bower_components/angular-route/angular-route.js:619:15
processQueue@http://10.0.3.162:8000/static/bower_components/angular/angular.js:13318:27
scheduleProcessQueue/<@http://10.0.3.162:8000/static/bower_components/angular/angular.js:13334:27
$RootScopeProvider/this.$get</Scope.prototype.$eval@http://10.0.3.162:8000/static/bower_components/angular/angular.js:14570:16
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://10.0.3.162:8000/static/bower_components/angular/angular.js:14386:15
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://10.0.3.162:8000/static/bower_components/angular/angular.js:14675:13
done@http://10.0.3.162:8000/static/bower_components/angular/angular.js:9725:36
completeRequest@http://10.0.3.162:8000/static/bower_components/angular/angular.js:9915:7
requestLoaded@http://10.0.3.162:8000/static/bower_components/angular/angular.js:9856:1



“错误：[ng:areq]参数'GuideDetailController'不是函数，未定义
http://errors.angularjs.org/1.3.20/ng/areq?p0=GuideDetailController&p1=not%20a                 n函数%2C%20未定义%20

Miner/首先，在开发时不应使用库的缩小版本

其次，您的唯一路由配置为使用控制器
'guideController'
。但您没有此类控制器。唯一定义的控制器名为
'GuideDetailController'


'guideController'
不是控制器。它是一个模块。
首先，在开发时不应使用库的缩小版本

其次，您的唯一路由配置为使用控制器
'guideController'
。但您没有此类控制器。唯一定义的控制器名为
'GuideDetailController'


'guideController'
不是控制器。它是一个模块。
您已将模块名称作为控制器放入路由配置中

更改自：


.config([
    '$routeProvider',
    function($routeProvider) {
      $routeProvider
        .when('/guide/:guideId', {
          controller: 'guideController',
          templateUrl: '/static/templates/hearthstone_guides/guide-detail.html'
        })
        .otherwise({
          redirectTo: '/'
        });
    }
  ])



config([
        '$routeProvider',
        function($routeProvider) {
          $routeProvider
            .when('/guide/:guideId', {
              controller: 'GuideDetailController',
              templateUrl: '/static/templates/hearthstone_guides/guide-detail.html'
            })
            .otherwise({
              redirectTo: '/'
            });
        }
      ])


至：


.config([
    '$routeProvider',
    function($routeProvider) {
      $routeProvider
        .when('/guide/:guideId', {
          controller: 'guideController',
          templateUrl: '/static/templates/hearthstone_guides/guide-detail.html'
        })
        .otherwise({
          redirectTo: '/'
        });
    }
  ])



config([
        '$routeProvider',
        function($routeProvider) {
          $routeProvider
            .when('/guide/:guideId', {
              controller: 'GuideDetailController',
              templateUrl: '/static/templates/hearthstone_guides/guide-detail.html'
            })
            .otherwise({
              redirectTo: '/'
            });
        }
      ])



您已将模块名称作为控制器放入路由配置中

更改自：


.config([
    '$routeProvider',
    function($routeProvider) {
      $routeProvider
        .when('/guide/:guideId', {
          controller: 'guideController',
          templateUrl: '/static/templates/hearthstone_guides/guide-detail.html'
        })
        .otherwise({
          redirectTo: '/'
        });
    }
  ])



config([
        '$routeProvider',
        function($routeProvider) {
          $routeProvider
            .when('/guide/:guideId', {
              controller: 'GuideDetailController',
              templateUrl: '/static/templates/hearthstone_guides/guide-detail.html'
            })
            .otherwise({
              redirectTo: '/'
            });
        }
      ])


至：


.config([
    '$routeProvider',
    function($routeProvider) {
      $routeProvider
        .when('/guide/:guideId', {
          controller: 'guideController',
          templateUrl: '/static/templates/hearthstone_guides/guide-detail.html'
        })
        .otherwise({
          redirectTo: '/'
        });
    }
  ])



config([
        '$routeProvider',
        function($routeProvider) {
          $routeProvider
            .when('/guide/:guideId', {
              controller: 'GuideDetailController',
              templateUrl: '/static/templates/hearthstone_guides/guide-detail.html'
            })
            .otherwise({
              redirectTo: '/'
            });
        }
      ])



我不想猜测。将缩小的文件替换为非缩小的文件，刷新并发布您收到的实际错误消息。您发布的是一行缩小的代码，这完全没有用。此外，地址栏中的url是什么，因为除/guide/xxx外的所有url都重定向到/，但您尚未配置任何路由r/。您的页面加载了脚本
controllers.js
，但您的文件名为（根据您的描述）
controller.js
。编辑您的问题并重新发布两个文件的新代码。它现在可以在@jbniset运行了！我从
var guideApp=angular.module（'guideApp'，['ngRoute'，guideController'）中删除了
guideController
）
因为这里发布的第一个答案告诉我这样做，但我还没有还原它，因为答案被删除了。非常感谢您的帮助！我不想猜测。将缩小的文件替换为未缩小的文件，刷新，然后发布您收到的实际错误消息。您发布的是一行缩小的文件代码，这是完全无用的。另外，地址栏中的url是什么，因为除了/guide/xxx之外的所有url都重定向到/，但您尚未为/，配置任何路由。您的页面加载脚本
controllers.js
，但您的文件名为（根据您的描述）
controller.js
。编辑您的问题并重新发布两个文件的新代码。它现在可以@jbniset！我从
var guideApp=angular.module（'guideApp'，['ngRoute'，'guideController'）中删除了
guideController
）
因为这里发布的第一个答案告诉我这样做，但我还没有回复，因为答案被删除了。非常感谢你的帮助！你为什么再次从依赖项中删除guidecontroller模块？angular.module（'guideApp'，['ngRoute'，'guidecontroller'）；啊，该死的，第一个答案（现在已删除）告诉我这么做…还没有恢复…现在可以了！！谢谢you@Sajeetharan我已经将JBNizets答案标记为最佳答案，因为他的答案也是正确的，并且在查找错误的过程中他帮了我很多忙：）是的，是的！：）没有问题为什么再次从依赖项中删除guidecontroller模块？angular.module（'guideApp'，['ngRoute'，'guideController']）；啊，该死，第一个答案（现在删除）告诉我这么做..还没有还原它…现在它工作了！！谢谢you@Sajeetharan我已经将JBNizets的答案标记为最佳答案，因为他的答案也是正确的，而且他在发现错误的过程中帮了我很多：）是的，是的！：）没问题