【问题标题】:Nothing is being shown while there's no error. The code is working fine没有错误时没有显示任何内容。代码工作正常
【发布时间】:2017-09-04 03:32:59
【问题描述】:

app.js

angular.module('app', ['ionic', 'ui.router'])

.config(('$urlRouterProvider', '$stateProvider', function($urlRouterProvider,$stateProvider){
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('view',{
      url:'/',
      templateUrl:'js/components/view/view32.html',
      controller:'viewCtrl'
    })

}))

server.js

 var express= require('express');
var mongoose = require('mongoose');
var bodyParser=require('body-parser');
var cors= require('cors');
var app= express();
var multiparty= require('connect-multiparty');
var multipartMiddleware= multiparty();
var viewController=require('./controllers/viewController');
var shareController=require('./controllers/shareController');
var configs = require('./configs/config.js');
configs.setConfigs();

mongoose.connect(process.env.MONGO_URL);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(multipartMiddleware);
app.use(cors());

app.use('/app', express.static(__dirname+ '/app'));
app.get('/',function(req,res){
    res.sendFile(__dirname +'/index.html');
});
app.post('/share', multipartMiddleware, shareController.shareNewPicture);
app.get('/getNewPhoto', viewController.getNewPhoto);
/*app.use(function(req, res, next) {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header('Access-Control-Allow-Methods','POST, GET, OPTIONS, PUT');
next();
});*/
var port = 8080 || process.env.PORT;
app.listen(port, function(){
    console.log('Server Started '+ port);
});

view.js

 (function(window, angular, undefined)
{
    angular.module('app')
    .controller('viewCtrl',['$scope','$state','$http',function($scope,$state,$http)
    {   
        $scope.pics=[];
        $http.get('http://localhost:8080/getNewPhoto').then(function(response){
            $scope.pics=response.data;
            console.log('Hello photos are here');
        },function(err)
        {
            console.error("There's an error"+err);
        })
    }])
})(window,window.angular)

我调用视图的 index.html index.html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link rel="manifest" href="manifest.json">
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script src="lib/ionic/js/ionic.bundle.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.min.js"></script>
    <script src="cordova.js"></script>
    <script src="js/app.js"></script>
    <script src="js/components/view/view.js"></script>
  </head>
  <body ng-app="app">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title"></h1>
      </ion-header-bar>
      <ion-content>
        <div ui-view>
        </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

这是我要展示的 view.html view1.html

<div>
    <div ng-repeat='pics in pic'>
        <p> This is the view.html</p>
        <img ng-src={{pic.url}}/>
    </div>
</div>

视图没有发生任何事情。我正在尝试查看照片,但没有显示任何错误或任何视图。请有大神帮忙!!

【问题讨论】:

  • response.data 中有什么?
  • 你有没有尝试像console.log(response.data);一样登录response.data

标签: javascript html angularjs node.js ionic-framework


【解决方案1】:

在 ajax 中你写:

$scope.pics=response.data;

但是在你的 ng-repeat 你的写作中:

<div ng-repeat='pics in pic'>

改成

<div ng-repeat='pic in pics'>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-04-28
    • 1970-01-01
    • 2013-05-21
    • 1970-01-01
    • 2016-06-28
    • 1970-01-01
    • 2012-09-07
    • 2015-01-26
    相关资源
    最近更新 更多