AngularJS：控制器是沒有得到所謂的

我有以下的HTML文件AngularJS：控制器是沒有得到所謂的

<!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 
[email protected]p://10.0.3.162:8000/static/bower_components/angular/angular.js:1590:1 
[email protected]://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/<[email protected]://10.0.3.162:8000/static/bower_components/angular-route/angular-route.js:978:26 
[email protected]://10.0.3.162:8000/static/bower_components/angular/angular.js:8281:9 
[email protected]://10.0.3.162:8000/static/bower_components/angular/angular.js:7791:1 
[email protected]://10.0.3.162:8000/static/bower_components/angular/angular.js:7140:13 
[email protected]://10.0.3.162:8000/static/bower_components/angular/angular.js:7019:30 
createBoundTranscludeFn/[email protected]://10.0.3.162:8000/static/bower_components/angular/angular.js:7158:1 
[email protected]://10.0.3.162:8000/static/bower_components/angular/angular.js:7818:18 
[email protected]://10.0.3.162:8000/static/bower_components/angular-route/angular-route.js:936:25 
$RootScopeProvider/this.$get</[email protected]://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 
[email protected]://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</[email protected]://10.0.3.162:8000/static/bower_components/angular/angular.js:14570:16 
$RootScopeProvider/this.$get</[email protected]://10.0.3.162:8000/static/bower_components/angular/angular.js:14386:15 
$RootScopeProvider/this.$get</[email protected]://10.0.3.162:8000/static/bower_components/angular/angular.js:14675:13 
[email protected]://10.0.3.162:8000/static/bower_components/angular/angular.js:9725:36 
[email protected]://10.0.3.162:8000/static/bower_components/angular/angular.js:9915:7 
[email protected]://10.0.3.162:8000/static/bower_components/angular/angular.js:9856:1

這是我的導detail.html文件看起來像

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

這是目前的結果我得到的時候我把這個網址http://10.0.3.162:8000/#/guide/1

來源

2015-11-03 BoJack Horseman

爲什麼你從刪除guidecontroller模塊依賴關係嗎？ angular.module（'guideApp'，['ngRoute'，'guideController']）; – Sajeetharan

啊該死的，第一個答案（現在刪除）告訴我這樣做..沒有恢復它，但現在它的工作！謝謝 –

@Sajeetharan我已經把JBNizets的回答標記爲最佳答案，因爲他的回答也是正確的，他在尋找錯誤的過程中幫了我很大忙頭:) –

首先，開發時不應使用庫的縮小版本。

其次，您的唯一路由配置爲使用控制器'guideController'。但你沒有這樣的控制器。定義的唯一控制器名爲'GuideDetailController'。

'guideController'不是控制器。這是一個模塊。

來源

2015-11-03 17:49:13

我不想猜。用縮小的文件替換縮小的文件，刷新併發布實際的錯誤消息。你發佈的是一行縮小的代碼，完全沒用。此外，地址欄中的網址是什麼，因爲除/ guide/xxx之外的所有網址都重定向到/，但您尚未爲/配置任何路由。 –

您的頁面加載腳本'controllers.js'，但您的文件被命名爲（根據您的描述）'controller.js'。 –

編輯您的問題並重新發布這兩個文件的新代碼。 –

您已經把模塊名作爲路由配置控制器

更改來源：

.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: '/' 
      }); 
     } 
     ])

來源

2015-11-03 17:49:18 Sajeetharan

AngularJS：控制器是沒有得到所謂的

回答

相關問題