質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.55%

AngularJSのcontroller内でDIされない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 835
退会済みユーザー

退会済みユーザー

AngularJS 1.4.3でログイン処理を書こうとしています。
サーバーサイドAPIにIDとパスワードをPOSTし、
ログイン認証に成功すればセッション情報(ユーザ属性など)を返すようにしています。
ログイン認証に成功したかどうかを判定して、
その上でページ遷移をしようとしているのですが、
デバッグをしている中でloginCtrlの中に$scopeと$httpしか
DIされておらず、インジェクションしたい$stateがundefinedのままになってしまいます。
自分で調べていましたが手詰まりになってしまったのでご教授いただきたく存じます。

'use strict';
angular.module('myApp', ['ui.router','tableSort','angular-loading-bar', 'ngAnimate'])
// Routes
.config(function($stateProvider){
  $stateProvider.state('/',{
    url: '/',
    templateUrl: 'index.html'
  })
})
.config(function($stateProvider){
  $stateProvider.state('result',{
    url: '/result/season/:id',
    templateUrl: 'views/stats.html',
    controller: 'resultCtrl',
    params:{
        param: null
    }
  })
})
.config(function($stateProvider){
  $stateProvider.state('login',{
    url: '/login',
    templateUrl: 'views/login.html',
    controller: 'loginCtrl',
    params:{
        param: null
    }
  })
})
// Default
.config(function($urlRouterProvider){
  $urlRouterProvider.when('', '/')
})
.controller('loginCtrl',['$scope','$stateParams','$rootScope','$state','$http',
                         function($scope,$stateParams,$rootScope,$state,$http) {
    $scope.onclick=function($state,$stateParams,$rootScope){
        $http({
            method: 'POST',
            url: '/api/v1/login/',
            data:{
                loginId: $scope.loginId,
                password:$scope.password
            }
        })
        .success(function(data, status, headers, config,$state) {
            $scope.items = data;
            if($scope.items.id != undefined){
                $state.go('index');
            }
        })
    }

}])
.controller('resultCtrl', function($scope, $stateParams,$http,$rootScope) {
    $scope.id = $stateParams.id;
    $http({
        method: 'GET',
        url: '/api/v1/result/season/'+$scope.id,
    })
    .success(function(data, status, headers, config,listSize) {
        $scope.items = data;
        listSize=$scope.items.listSize;
        $rootScope.range = function(listSize) {
            var arr = [];
            for (var i=0; i<listSize; ++i) arr.push(i);
            return arr;
        };
        for(var i=0;i<$scope.items.resultList.length;i++){
            $scope.items.resultList[i]['opponentList']=new Array();
            for(var j=0;j<$scope.items.opponentList.length;j++){
                if($scope.items.resultList[i].teamId==$scope.items.opponentList[j].teamId){
                    $scope.items.resultList[i]['opponentList'].push($scope.items.opponentList[j]);
                }
            }
        }
    })
     .error(function(data, status, headers, config){
        alert("通信エラー");
    });
 });
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
    <script src="https://unpkg.com/@uirouter/angularjs@1.0.5/release/angular-ui-router.js"></script>
    <script src="https://code.angularjs.org/1.4.3/angular-animate.js"></script>
    <script src="scripts/angular-tablesort.js"></script>
    <script type='text/javascript' src="scripts/loading-bar.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="scripts/route.js"></script>
    <link rel="stylesheet" type="text/css" href="css/tablesort.css">
    <link rel="stylesheet" href="css/loading-bar.min.css" type='text/css' media='all' />
</head>
<body ng-app="myApp">
    <ui-view></ui-view>
</body>
</html>
<form ng-submit="login()" name="loginForm">
        <label>ログインID</label>
        <input type="text" name="text" class="form-control" placeholder="IDを入力してください" ng-model="loginId"
               required>
        <label>パスワード</label>
        <input type="password" name="password" class="form-control" placeholder="パスワードを入力してください"
               ng-model="password" required>
        <button type="submit" ng-disabled="loginForm.$invalid" class="btn btn-primary" ng-click="onclick()">ログイン</button>
</form>


参考:AngularJS ui-routerを使って認証機能を実装してみよう
参考にはしたのですが、認証の判定タイミングなどが全然違うので
ソースとしては似ていません。
全てのページでログインが必要なわけではないのでAPIに逐一確認する手順を取ろうと思っています。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

$scope.onclick=function($state,$stateParams,$rootScope){

↑ここの引数が不要ではないでしょうか。

$scope.onclick=function(){

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/24 17:19

    ありがとうございます。
    $stateの定義忘れかと思ったのですが、修正してもDIされていないのは変わりません。

    キャンセル

  • 2017/08/24 17:22

    successの方の$stateを削除してもダメですか?

    キャンセル

  • 2017/08/24 17:26

    ありがとうございます。
    修正したところDIできていることを確認しました。
    DIできていないのではなく初期化してしまっていたのですね…。
    ご迷惑をおかけしました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.55%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる