2017-05-14 127 views
0

出於某種原因,我的控制器似乎並沒有登記註冊,我真的不知道爲什麼...控制器不按控制檯

我一直沿着PluralSight的AngularJS和Django開發過程如下。教師的堆棧和我的唯一區別是我使用的是Angular 1.6.4,他使用的是1.5.0。我以前遇到過一些錯誤(如路由語法),但總體來說還不錯。

編輯:

我要指出,我只是按照教練的指示和編寫相同的代碼作爲他。


然而,現在,我只是卡住了。我有這個路由在scrumboard.config.js

(function() { 

    "use strict"; 

    angular.module('scrumboard.demo', ["ngRoute"]) 
     .config(["$routeProvider", config]) 
     .run(["$http", run]); 

     function config($routeProvider) { 

      $routeProvider 
       .when('/', { 
        templateUrl: "/static/html/scrumboard.html", 
        controller: "ScrumboardController", 
       }) 
       .when('/login', { 
        templateUrl: "/static/html/login.html", 
        controller: "LoginController", 
       }) 
       .otherwise('/'); 
     } 

     function run($http) { 
      $http.defaults.xsrfHeaderName = 'X-CSRFToken'; 
      $http.defaults.xsrfCookieName = 'csrftoken'; 
     } 
})(); 

而這個控制器的login.html

(function() { 

    "use strict"; 

    angular.module("scrumboard.demo", []) 
     .controller("LoginController", 
        ["$scope", "$http", "$location", LoginController]); 

    function LoginController($scope, $http, $location) { 

     $scope.login = function() { 

      $http.post('/auth_api/login/', $scope.user) 
       .then(function (response){ 
        $location.url("/"); 
       }, 
       function(error) { 
        //failure 
        $scope.login_error = "Invalid username or password"; 
       }); 
     }; 
    }; 

})(); 

當導航到localhost:8000/#!/login我可以看到我的形式:

<form ng-submit="login()"> 
    <div style="...">{{ login_error }}</div> 
    <div> 
     <label>Username</label> 
     <input type="text" ng-model="user.username"/> 
    </div> 
    <div> 
     <label>Password</label> 
     <input type="password" ng-model="user.password"/> 
    </div> 
    <div> 
     <button type="submit">Submit</button> 
    </div> 
</form> 

但由於一些奇怪的原因,我的控制檯告訴我,我的LoginController不是註冊。

任何人都可以幫助我在正確的方向嗎?

對不起,如果我缺少任何類型的文件,但我對Angular很陌生,所以我不知道要添加什麼。

如果您需要任何附加信息,請告訴我!

+0

你可以在index.html中顯示加載腳本標記的順序嗎? – zaidfazil

回答

1

從您的控制器的定義中刪除[]login.html

angular.module("scrumboard.demo") 
    .controller("LoginController", 
       ["$scope", "$http", "$location", LoginController]); 
+0

正如在其他答案中提到的,我嘗試了使用和不使用'[]',但路線仍然似乎拋出相同的hissyfit ... – geostocker

+0

@geostocker你有'ScrumboardController'相同的代碼,如果是的話移動'[]'也在那裏。 – Pengyy

+0

@geostocker是的,我做了很多次:P – Pengyy

0

您聲明模塊scrumboard.demo兩次。

[]

angular.module("scrumboard.demo") 
     .controller("LoginController", 
        ["$scope", "$http", "$location", LoginController]); 

如果沒有angular.module()第二個參數是一個getter刪除,否則它是一個setter

+0

這也是我的想法,但即使沒有'[]'也會引發同樣的hissyfit。我添加了'[]'來檢查它是否會產生任何不同。感謝您的建議,但! :) – geostocker

+0

當你在教程中回滾到相同版本時會發生什麼......並確保'ngRoute'版本也匹配? – charlietfl

+0

你還忘了包含'LoginController'文件嗎? – charlietfl

0

在入口點HTML,文件scrumboard.config腳本標籤。 js應該在文件控制器文件之前。同樣作爲@charlietfl說宣佈兩次應該被刪除。

這樣,

<script src="your_path/scrumboard.config.js"></script> 
<script src="your_path/scrumboard.controller.js"></script> 

希望這會解決問題。