Question

我有以下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>

[[ ]]括号是angularJS的新符号。我将在angularJS文件中声明它们。结合name变量（Hello [[name]]）的双向数据绑定用于测试角度并且它起作用。我可以确保它被正确包含在内。

这是我的app.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(']]');
  });

这是我的controllers.js

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);
      });
  }
]);

当console.log('foo');例如var guideController = angular.module('guideController', []);和guideController.controller('GuideDetailController', [...之间有效时。

不幸的是console.log('success');和console.log(status, data);都不起作用。

编辑：

我现在根据您的建议将控制器名称更改为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

这就是我的guide-detail.html文件的样子

<h1>[[guide.title]]</h1>
<h1>{{guide.title}}</h1>

这是我在调用此网址http://10.0.3.162:8000/#/guide/1

时获得的当前结果

Answer 1

您已将模块名称作为路径配置中的控制器

更改发件人：

'guideController'

要

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

Answer 2

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

其次，您的唯一路由配置为使用控制器{ echo "STATUS / HTTP/1.1"; echo "Host: rhel7GAx86-64:8847"; echo "Content-length: 26"; echo ""; echo -e "JVMRoute=worker1&Load=100/c"; sleep 1; sleep 1; } | telnet rhel7GAx86-64 8847。但是你没有这样的控制器。唯一定义的控制器名为'guideController'。

'GuideDetailController'不是控制者。它是一个模块。

AngularJS：控制器没有被调用

2 个答案: