堆棧內存溢出
  簡體   English   中英

無法從控制器查看偽數據

[英]Cannot view dummy data from controller

 原文  2017-03-23 18:37:56  3   4    javascript/ angularjs/ html5/ express

問題描述

我是新來的意思是堆棧實現。 我試圖從控制器查看數據。 但這沒有用。 Web瀏覽器的控制台當時給出了此錯誤消息。 

Error: [$controller:ctrlreg] http://errors.angularjs.org/1.6.3/$controller/ctrlreg?p0=AppCtrl
Stack trace:
M/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:6:425
wf/this.$get</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:93:395
ba@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:76:290
n@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:68:1
g@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:61:496
g@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:62:12
g@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:62:12
ca/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:61:119
Pc/c/</<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:22:4
Mf/this.$get</m.prototype.$eval@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:149:176
Mf/this.$get</m.prototype.$apply@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:149:400
Pc/c/<@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:21:469
h/<.invoke@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:44:169
Pc/c@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:21:390
Pc@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:22:179
ue@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:20:379
@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:332:117
b@https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js:38:36

以下文件是server.js，index.html和controller.js文件。如何解決此問題。

server.js 

var express = require('express');
var app = express();


app.use(express.static(__dirname + "/public"));

app.listen(3000);
console.log("Server is running");

的index.html 

<!DOCTYPE>
<html ng-app>
<head>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <title>Contact app list</title>
</head>
<body>
    <div class="container" ng-controller = "AppCtrl">
        <h1>Contact List</h1>

        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Number </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="content in contactlist">
                    <td>{{contact.name}}</td>
                    <td>{{contact.email}}</td>
                    <td>{{contact.number}}</td>
                </tr>
            </tbody>
        </table>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>

<script src="controllers/controller.js"></script>
</body>
</html>

controller.js 

function AppCtrl($scope){
    console.log("Hello controller");

    person1 ={
        name:'Hello',
        email: '123',
        number:'1'
    };

    person2 ={
        name:'gello',
        email: '456123',
        number:'31'
    };

    person3 ={
        name:'33Hello',
        email: '33123',
        number:'31'
    };

    var contactlist = [person1, person2 , person3];
    $scope.contactlist = contactlist;
}

4 個解決方案

解決方案1
 0  2017-03-23 19:25:50

這是由於控制器未在您的應用程序中注冊而導致的錯誤。 未調用功能AppCtrl。 嘗試像這樣注冊控制器 

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

myApp.controller('GreetingController', ['$scope', function($scope) {
  $scope.greeting = 'Hola!';
}]);

如有任何疑問，請檢查控制器的文檔示例

請讓我知道我是否誤解或錯過了什么。

希望這會有所幫助。 謝謝。

解決方案2
 0  2017-03-23 19:32:08

  var AppCtrlfn = function ($scope){ person1 ={ name:'Hello', email: '123', number:'1' }; person2 ={ name:'gello', email: '456123', number:'31' }; person3 ={ name:'33Hello', email: '33123', number:'31' }; var contactlist = [person1, person2 , person3]; $scope.contactlist = contactlist; } angular.module('app', []) .controller('AppCtrl',AppCtrlfn) 
 <html ng-app="app"> <head> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <title>Contact app list</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> </head> <body> <div class="container" ng-controller = "AppCtrl"> <h1>Contact List</h1> <table class="table"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Number </th> </tr> </thead> <tbody> <tr ng-repeat="content in contactlist"> <td>{{content.name}}</td> <td>{{content.email}}</td> <td>{{content.number}}</td> </tr> </tbody> </table> </div> </body> </html>

解決方案3
 0  2017-03-23 19:37:40

從@yashwanth_t的注釋擴展而來，並從您的代碼中進行修改

嘗試這個

您的app.js 

var myApp = angular.module('myApp',[]);
myApp.controller('ContactCtrl', ['$scope', function($scope) {
  var person1 ={
      name:'Hello',
      email: '123',
      number:'1'
  };

    var person2 ={
      name:'gello',
      email: '456123',
      number:'31'
  };

  var person3 ={
      name:'33Hello',
      email: '33123',
      number:'31'
  };
  $scope.contactList = [];
  $scope.contactList.push(person1);
  $scope.contactList.push(person2);
  $scope.contactList.push(person3);
  console.log($scope.contactList)
}]);

在您的index.html中 

<div class="container" ng-app="myApp">
    <h1>Contact List</h1>

    <table class="table" ng-controller="ContactCtrl">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Number </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="contact in contactList">
                <td>{{contact.name}}</td>
                <td>{{contact.email}}</td>
                <td>{{contact.number}}</td>
            </tr>
        </tbody>
    </table>
</div>

解決方案4
 0  2017-03-24 08:33:13

謝謝所有嘗試幫助我的人。.我必須更改index.html和controller.html文件才能解決該問題。

的index.html 

<!DOCTYPE>
<html ng-app="myapp">
<head>
    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <title>Contact app list</title>
</head>
<body>
    <div class="container" ng-controller = "AppCtrl">
        <h1>Contact List</h1>

        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Number </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="content in contactlist">
                    <td>{{content.name}}</td>
                    <td>{{content.email}}</td>
                    <td>{{content.number}}</td>
                </tr>
            </tbody>
        </table>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>

<script src="controllers/controller.js"></script>
</body>
</html>

controller.js 

var app = angular.module('myapp',[]);


app.controller ('AppCtrl', function($scope){
    console.log("Hello controller");

    person1 ={
        name:'Hello',
        email: '123',
        number:'1'
    };
    person2 ={
        name:'gello',
        email: '456123',
        number:'31'
    };

    person3 ={
        name:'33Hello',
        email: '33123',
        number:'31'
    };

    var contactlist = [person1, person2 , person3];
    console.log(contactlist);
    $scope.contactlist = contactlist;
});

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 我無法將數據從控制器傳遞到Sencha Touch 2.4中的視圖 將數據從View傳遞到Controller 將數據從視圖發送到控制器 無法從控制器檢索數據 如何在視圖上顯示帶有偽數據的劍道握把 無法使用 Ajax 將數據列表從控制器返回到視圖中的下拉列表。 我收到未定義的未定義錯誤 將數據從Jade視圖傳遞到控制器 如何在Codeigniter中將數據從視圖發送到控制器 無法將數據從控制器讀入視圖 Sencha Touch 2：將數據從控制器傳遞到視圖
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM