angularjs - 在 Angualr.js 中保存 ng-src 的状态

Question

我正在尝试为 Angular.js 中的应用程序制作可保存的标题图像，到目前为止，我有此代码，也可在此处作为 Plunker 使用：

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

app.controller('MainCtrl', function($scope) {

  $scope.bannerState = false;

  $scope.changeHeader = function () {
    $scope.bannerState = true;
  };

  $scope.currentImage = 0;

  $scope.nextButton = function () {
    if ($scope.bannerState) {
      $scope.currentImage++;
    }
    if ($scope.currentImage > ($scope.bannerImages.length - 1)) {
      $scope.currentImage = 0;
    }
  };

  $scope.previousButton = function () {
    if ($scope.bannerState) {
      $scope.currentImage--;
    }
    if ($scope.currentImage < 0) {
      $scope.currentImage = ($scope.bannerImages.length - 1);
    }
  };

  $scope.setHeader = function () {
    $scope.bannerState = false;
  };

  $scope.bannerImages = [
    {
      src: "http://yaocho-digital.com/portfolio/content/threadme1.png"
    },
    {
      src: "http://yaocho-digital.com/portfolio/content/threadme2.png"
    },
    {
      src: "http://yaocho-digital.com/portfolio/content/threadme3.png"
    }
  ];
});

我不知道如何将它存储在一个对象中，这样我就可以离开页面然后回来，它就在那里！请帮忙！

J.P

Answer 1

你可以把它放在 $rootScope - 只要你的页面没有重置，你会很好

Answer 2

HTML 5 本地存储将是在本地存储状态的一个选项。

我修改了你的app.js文件：

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

app.controller('MainCtrl', function($scope) {

  $scope.bannerState = false;

  $scope.changeHeader = function () {
    $scope.bannerState = true;
  };

  $scope.currentImage = window.localStorage.getItem("bannerImage") | 0;

  $scope.nextButton = function () {
    if ($scope.bannerState) {
      $scope.currentImage++;
    }
    if ($scope.currentImage > ($scope.bannerImages.length - 1)) {
      $scope.currentImage = 0;
    }
  };

  $scope.previousButton = function () {
    if ($scope.bannerState) {
      $scope.currentImage--;
    }
    if ($scope.currentImage < 0) {
      $scope.currentImage = ($scope.bannerImages.length - 1);
    }
  };

  $scope.setHeader = function () {
    window.localStorage.setItem("bannerImage", $scope.currentImage);
    $scope.bannerState = false;
  };

  $scope.bannerImages = [
    {
      src: "http://yaocho-digital.com/portfolio/content/threadme1.png"
    },
    {
      src: "http://yaocho-digital.com/portfolio/content/threadme2.png"
    },
    {
      src: "http://yaocho-digital.com/portfolio/content/threadme3.png"
    }
  ];
});