Question

我是AngularJS的新手，我正在尝试创建一个主页，从我的数据库加载动态内容以创建链接。当我单击主页上的其中一个链接时，它会向我的节点服务器发送请求，并从数据库中检索相应的数据并在部分视图上显示该数据。当我在该局部视图上点击浏览器的后退按钮返回主页时，最初加载的动态内容无法显示。以下是我的代码。为什么不点击浏览器的后退按钮会重新显示包含动态内容的主页？

index.html

<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
  <meta charset="utf-8">
  <base href="/">
  <title>My site</title>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/animations.css">

  <script src="bower_components/jquery/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-animate/angular-animate.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/angular-resource/angular-resource.js"></script>
  <script src="/js/animations.js"></script>
  <script src="/js/controllers.js"></script>
  <script src="/js/filters.js"></script>
  <script src="/js/app.js"></script>
</head>
<body ng-controller="mainController">
  <div class="container">
      <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="/" ng-click="home()">Home</a>
          </div>
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
            </ul>
            <form class="navbar-form navbar-left" role="search">
              <div class="form-group">
                <input type="text" class="form-control" data-provide="typeahead" autocomplete="off" placeholder="foo, bar" ng-model="query">
              </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
            </ul>
          </div>
        </div>
      </nav>
  </div>
  <div class="view-container">
    <div ng-view class="view-frame"></div>
  </div>
</body>
</html>

phone-detail.html

<div class="phone-images">
  <img ng-src="{{thing.imageUrl}}"  dclass="phone">
</div>
  <h1> {{ things[0].name }} </h1>
    <iframe id="viddy" width="560" height="315" ng-src="{{  things[0].embed }}" frameborder="0" allowfullscreen autoplay="1" ></iframe>
          <p>source:</p>
          <p>{{ things[0].vid }}</p>
</div>

phone-list.html

<div class="container-fluid">
  <div class="row">
    <div class="col-md-10">
      <!--Body content-->
      <div>
        <div ng-if="things.length>1">
          <ul class="phones">
            <li ng-repeat="foo in things | filter:query"
                class="thumbnail phone-listing">
              <a href="#/{{thing.name}}" class="thumb" ng-click="search(foo.name)"><img ng-src="{{foo.imageUrl}}"></a>
              <a href="#/{{foo.name}}" ng-click="search(foo.name)">{{foo.name}}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

//controller.js

'use strict';

/* Controllers */

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

coreControl.controller('mainController', ['$scope', '$http', '$sce', '$locationProvider'
    function($scope, $http, $sce, $locationProvider) 
    {
      //$scope.$on('$routeChangeSuccess', function(req, res) {console.log($route.current.params);})

      $scope.formData = {};
      $scope.things  = [];
      $scope.maxThings = 0;

      $http.get('/things')
        .success(function(data) 
        {
          $scope.things = data;
          $scope.maxThings = $scope.things.length;
          console.log(data);
        })
        .error(function(data) 
        {
          console.log('Error: ' + data);
        });

      $scope.home = function()
      {
        $http.get('/things')
        .success(function(data) 
        {
          $scope.things = data;
          $scope.maxThings = $scope.things.length;
          console.log(data);
        })
        .error(function(data) 
        {
          console.log('Error: ' + data);
        });
      }

      $scope.search = function(thing)
      {
        $http.get('/thing/'+thing, $scope.formData)
          .success(function(data) 
          {
            $scope.formData     = {};
            $scope.things        = data;
            $scope.msg          = "Recommend a video."
            $scope.noMatch      = false;

            if($scope.things.length == 0)
            {
              $scope.noMatch = true;
            }

            $scope.things[0].embed = $sce.trustAsResourceUrl($scope.things[0].embed+"?autoplay=0&showinfo=0&controls=0&loop=1");
            document.getElementById('viddy').src = document.getElementById('viddy').src;
            console.log(data);
          })
          .error(function(data) 
          {
            console.log('Error: ' + data);
          });
      }
    }]);

//app.js

'use strict';

var phonecatApp = angular.module('phonecatApp', [
  'ngRoute',
  'phonecatAnimations',
  'prjController'
]);

phonecatApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/:thingId', {
        templateUrl: 'partials/phone-detail.html'
      }).
      otherwise({
        templateUrl: 'partials/phone-list.html'
      });
  }]);

//server.js

var express     = require('express');
var app         = express();
var mysql       = require('mysql');
var port        = process.env.PORT || 8887;
var db          = require('./config/db');
var connection  = mysql.createConnection(db);
connection.connect();

app.configure(function()
{
    app.use(express.static(__dirname + '/public'));
    app.use(express.logger('dev'));
    app.use(express.bodyParser());
});

require('./app/router')(app, connection);

app.listen(port);
exports = module.exports = app;

//router.js

module.exports = function(app, conn)
{
    app.get('*', function(req, res){
        var url = req.originalUrl;

        if(url.match(/^\/thing\/.+/))
        {
            var query_thing = url.replace(/%20/g, ' ');
            query_thing = query_thing.replace(/\/thing\//, '');
            require('./search')(query_thing, res, conn);
        }
        else
        {
            require('./populate')(res, conn);
        }
    });
};

//populate.js
module.exports = function(res, connection)
{
    function getRandIds(rep, max)
    {
        var ids = [];

        //create a list of rep-many random integers, which may have repetitions
        for (var i = 0; i < rep; i++) 
        { 
            ids.push(Math.floor(Math.random()*100) % max);
        }

        function numercalSort(a,b)
        {
            return a-b;
        }

        //sort() without the callback sorts alphabetically
        ids.sort(numercalSort);
        console.log(ids);
        var notUnique = false;

        //check that each id is unique so that the exact number of ids will be queried
        for(var i = 0; i < ids.length; i++)
        {
            if(i+1 < ids.length && ids[i] == ids[i+1]) 
            {
              notUnique = true;
            }
        }

        //recurse if the values are not all unique
        if(notUnique)
        {
            ids = getRandIds(rep, max);
        }

        return ids;
    }

    //creates a query that searches for random ids
    function queryRand(rep, max) 
    {

        var sql = "select m.name, m.imageUrl, v.vid, v.embed from things as m, videos as v where m.id=v.id and (";
        var ids = getRandIds(rep, max);

        for(var i = 0; i < ids.length; i++) 
        {
            sql += " m.id like "+ids[i];

            if(i < ids.length - 1)
            {
              sql += " or";
            }
            else
            {
              sql += ");";
            }
        }
          var sql = "select m.name, m.imageUrl, v.vid, v.embed from things as m, videos as v where m.id=v.id";
          return sql;
    }

    //handles the output
    function handleOut(err, result, fields)
    {
        if(err) throw err;
        console.log('rand results: ',result);
        res.json(result);
    }

    var repetitions = 10;    //number of things to display
    var totalCount  = 372;  // total number of things in the database
    var sql = queryRand(repetitions, totalCount);
    connection.query(sql, handleOut);
};

Answer 1

很长一段时间后，我终于意识到问题是我只有一个控制器可以保存所有控制器的功能。那只装了一次。因为它只加载一次，所以$ http.get（'/ things'）调用仅在控制器最初加载时进行一次。为了解决这个问题，我将控制器分开了。我专门为我的主页做了一个，并为它做了一个单独的部分，并将控制器专门放在那个部分，所以它每次加载部分加载。这也需要适当地更新index.html和app.js.

//mainController.js
angular.module('prjController', [])
    .controller('mainController', ['$scope', '$http', '$sce',
    function($scope, $http, $sce) 
    {    
      $http.get('/things')
        .success(function(data) 
        {
          $scope.things = data;
          $scope.maxThings = $scope.things.length;
          console.log(data);
        })
        .error(function(data) 
        {
          console.log('Error: ' + data);
        });
    }]);

<!-- main.html partial -->
<div class="container-fluid" ng-controller="mainController">
      <!--Body content-->
       ...
</div>

AngularJS将动态内容保存到历史记录中

1 个答案: