错误:[ng:areq]参数'UserDataController'不是函数,未定义

时间:2016-05-24 09:01:50

标签: angularjs json

我是AngularJS的新用户,我试图只在我的JSON响应中将我的groupname存储在一个数组中。

我收到以下错误

angular.js:9997 Error: [ng:areq] Argument 'UserDataController' is not a function, got undefined
http://errors.angularjs.org/1.2.20/ng/areq?p0=UserDataController&p1=not%20aNaNunction%2C%20got%20undefined
    at https://code.angularjs.org/1.2.20/angular.js:78:12
    at assertArg (https://code.angularjs.org/1.2.20/angular.js:1481:11)
    at assertArgFn (https://code.angularjs.org/1.2.20/angular.js:1491:3)
    at https://code.angularjs.org/1.2.20/angular.js:7213:9
    at link (https://code.angularjs.org/1.2.20/angular-route.js:913:26)
    at nodeLinkFn (https://code.angularjs.org/1.2.20/angular.js:6648:13)
    at compositeLinkFn (https://code.angularjs.org/1.2.20/angular.js:6039:13)
    at publicLinkFn (https://code.angularjs.org/1.2.20/angular.js:5934:30)
    at boundTranscludeFn (https://code.angularjs.org/1.2.20/angular.js:6059:21)
    at controllersBoundTransclude (https://code.angularjs.org/1.2.20/angular.js:6669:18)

这是我的索引页面,我已经给出了所有css,bootstrap文件和位置。

我的 index.html

    <!DOCTYPE html>
    <html ng-app="app">

<head>
  <meta charset="utf-8"/>
  <title>Groupz</title>
  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <link href="https://cdn.rawgit.com/cornflourblue/angular-registration-login-example/master/app-content/app.css" rel="stylesheet" />

<link rel="stylesheet" type="text/css" href="css/login.css">

<link rel="stylesheet" type="text/css" href="css/register.css">
</head>

<body>

 <div class="main-wrapper" >     
        <div ng-class="{ 'alert': flash, 'alert-success': flash.type === 'success', 'alert-danger': flash.type === 'error' }" ng-if="flash" ng-bind="flash.message"></div>
        <div ng-view></div>
      </div>


  <div class="credits text-center">

  </div>

  <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script src="https://code.angularjs.org/1.2.20/angular.js"></script>
  <script src="https://code.angularjs.org/1.2.20/angular-route.js"></script>
  <script src="https://code.angularjs.org/1.2.13/angular-cookies.js"></script>


  <script src="app.js"></script>
  <script src="app-services/authentication.service.js"></script>

  <!-- real time API storage-->
  <script src = "app-services/user.service.js"></script>
  <script src="app-services/flash.service.js"></script>


  <!-- Fake user service for demo that uses local storage -->
  <script src="app-services/user.service.js"></script>
<!-- storage dependency-->
    <script src="js/ngStorage.min.js"></script>
  <script src="controller/userdata.controller.js"></script>
  <script src="controller/login.controller.js"></script>
  <script src="controller/register.controller.js"></script>
  <script src="controller/resetpassword.controller.js"></script>


</body>

</html>

登录后,我得到json响应如下

{
  "json": {
    "response": {
      "statuscode": "0",
      "statusmessage": "Success",
      "user": [
        {
          "groupname": "School BSK",
          "membername": "Preethi Ritesh",
          "session_id": "573eaea74a96c3442a2e45a0"
        },
        {
          "groupname": " Office",
          "membername": "Preethi Ritesh",
          "session_id": "573eaea74a96c3442a2e45a2"
        },
        {
          "groupname": "Team Developers",
          "membername": "Preethi Ritesh",
          "session_id": "573eaea74a96c3442a2e45a4"
        },
        {
          "groupname": "Pavan School",
          "membername": "Preethi",
          "session_id": "573eaea74a96c3442a2e45a6"
        },
        {
          "groupname": "Shubiksha Apartments",
          "membername": "Preethi",
          "session_id": "573eaea74a96c3442a2e45a8"
        },
        {
          "groupname": "Shubiksha Apartments",
          "membername": "Rohan Ritesh",
          "session_id": "573eaea74a96c3442a2e45aa"
        },
        {
          "groupname": "Little Millenium - Girinagar",
          "membername": "Preethi",
          "session_id": "573eaea74a96c3442a2e45ac"
        },
        {
          "groupname": "Group App Testing",
          "membername": "Preethi Ritesh",
          "session_id": "573eaea74a96c3442a2e45ae"
        },
        {
          "groupname": "Group App Testing",
          "membername": "Ritesh Kumar",
          "session_id": "573eaea74a96c3442a2e45b0"
        },
        {
          "groupname": "Team Analysts",
          "membername": "Preethi Ritesh",
          "session_id": "573eaea74a96c3442a2e45b2"
        },
        {
          "groupname": "Office",
          "membername": "Preethi",
          "session_id": "573eaea74a96c3442a2e45b4"
        },
        {
          "groupname": "Office",
          "membername": "Rohan Ritesh",
          "session_id": "573eaea74a96c3442a2e45b6"
        },
        {
          "groupname": "Office",
          "membername": "PreethiEngineer",
          "session_id": "573eaea74a96c3442a2e45b8"
        },
        {
          "groupname": "Test SR",
          "membername": "SR Tester",
          "session_id": "573eaea74a96c3442a2e45ba"
        },
        {
          "groupname": "Planet Kids Banashankari",
          "membername": "Preethi Ritesh",
          "session_id": "573eaea74a96c3442a2e45bc"
        }
      ]
    }
  }
}

从上面的回复我需要在cookieStore中单独存储groupname,membername和sessionid。

然后我需要列出个人资料页面中的所有组名。

这是我在登录后使用的控制器,我试图将所有组名推送到一个数组中,需要在我的视图或个人资料页面中将其视为列表。

我的 userdata.controller.js

(function () {
    'use strict';

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

myApp.controller('UserDataController', function($scope,$localStorage,$http,$q) {
       $scope.model = { 
    'displayHome' : false,
    'dropDownData':[]
       };


       $scope.cookietechnology = $localStorage.x; //getting data from cookies

       if($scope.cookietechnology){

        $scope.model.dropDownData  = $scope.cookietechnology;
        $scope.model.selectedValue = $scope.cookietechnology;
        $scope.model.displayHome =  true;

    }



     $scope.getData = function(requestedUrl,requestHeader, requestData,requestMethod) {
    $scope.model.dropDownData = [];
                 var deferred = $q.defer();
                 var req = {
                     method: requestMethod,
                     url: requestedUrl,
                     headers:{"Content-Type": "application/x-www-form-urlencoded"},
                     data: requestData
                 };

         var user = response.json.response.user;


             $http(req)
                     .success(function(response) {
                 for(var i=0; i<user.length-1; i++)
        { 
                                 console.log("datas : "+response.json.response.user[i].groupzdetails.groupname);


            $scope.model.dropDownData.push(response.json.response.user[i].groupzdetails.groupname); // we can itterate and set the drop down values
            $scope.model.selectedValue = response.json.response.user[i].groupzdetails.groupname;   // set model value
        }
            $localStorage.x = $scope.model.dropDownData;  //setting data in cookies

            $scope.model.displayHome = true; // variable to show and hide home and login

                         deferred.resolve(response);
                     })
                     .error(function(error) {
                         deferred.reject(error);
                     });

                 return deferred.promise;

             };     


});
}) ();

我正在尝试使用选择框列出我的所有组名 并尝试将membername显示为欢迎名称。

我的 home.view.html

<html ng-app="myApp">
    <style>
        /* Remove the navbar's default margin-bottom and rounded borders */

        .navbar {
            margin-bottom: 0;
            border-radius: 0;
            border-color: white;
            height: 6em;
            padding-top: 12px;
            background-color: #2eb2f2;
        }
        /* Set height of the grid so .sidenav can be 100% (adjust as needed) */

        .row.content {
            height: 1000px
        }
        /* Set gray background color and 100% height */

        .sidenav {
            padding-top: 20px;
            background-color: #f1f1f1;
            height: 100%;
        }
        /* Set black background color, white text and some padding */

        footer {
            background-color: #555;
            color: white;
            padding: 15px;
        }
        /* On small screens, set height to 'auto' for sidenav and grid */

       @media screen and (max-width: 767px) {
            .sidenav {
                height: auto;
                padding: 15px;
            }
            .row.content {
                height: auto;
            }
        }

        canvas {
            padding: 0 30px 0 0;
        }
    </style>

<body>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <img class="img-responsive" src="css/images/Groupz.png" />
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">

        <div class="nav navbar-nav navbar-right" style="padding-top:6px;">
        <div class="dropdown">
        <span class="badge">5</span><img style="padding-right:10px;" src="css/images/bell1.png" />
        <img class="img-circle dropdown-toggle" data-toggle="dropdown" width="40" height="40" src="css/images/image.jpg" /><span class="caret dropdown-toggle" data-toggle="dropdown"></span>

        <ul class="dropdown-menu">
        <li><a href="#/login">Logout</a></li>
        </ul>
       </div>
     </div>
   </div>
  </div>
</nav>

<div class="container-fluid text-center" ng-controller="UserDataController as ctrl">
     <div class="row content" style="margin-top:100px; color:rgba(51, 122, 183, 1);" ng-if="!model.displayHome">
        <button ng-click="getData('json_resp.json','','','GET')">Click to login</button>
    </div>
        <div class="row content" ng-if="model.displayHome">
            <div class="col-sm-2 sidenav">
        <div class="well well-lg col-xs-30" style="background-color: green;" ng-show="true">

        <img class="img-responsive" style="padding-bottom:10px;" src="css/images/image.jpg" />
        <div class="form-group"> 
           <select class="form-control" ng-model="model.selectedValue" name="groupname"> 
                 <option value='' disabled> Switch Account </option>
                  <option ng-repeat="item in model.dropDownData track by $index" value="{{item}}">{{item}}</option>
                   </select>
                    </div>
                </div>
      <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li><a href="#/dashboard"><span class="glyphicon glyphicon-dashboard vmenu"></span>  Dashboard</a>
      </li>
      <li class="#/Profile"><a href="#/"><span class="glyphicon glyphicon-user vmenu"></span>Profile</a>
      </li>
         <li><a href="#/Account"><span class="glyphicon glyphicon-edit vmenu"></span>Account</a>
      </li>
         <li><a href="#/Dropbox"><span class="glyphicon glyphicon-tags vmenu"></span>Dropbox</a>
      </li>
         <li><a href="#/Checklist"><span class="glyphicon glyphicon-off vmenu"></span>Checklist</a>
      </li>
        <li><a href="#/Report"><span class="glyphicon glyphicon-off vmenu"></span>Report</a>
      </li>
        <li><a href="#/Settings"><span class="glyphicon glyphicon-off vmenu"></span>Settings</a>
      </li>
        <li><a href="#/Help"><span class="glyphicon glyphicon-off vmenu"></span>Help</a>
      </li>
    </ul>

  </div>
    </div>

    <div class="col-sm-8 text-left"> 
      <h1>Welcome</h1>
      <h6 class="page-header ng-binding" ng-model="membername">{{membername}}</h6>

</div>
</div>
     </div>
<footer class="container-fluid text-center">
  <p>Groupz</p>
</footer>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

Working Demo

您应该包含ngStorage.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.10/ngStorage.js"></script>

希望能解决你的问题。