Как сохранить открытое окно div, используя angularjs - PullRequest
Новая
       10

Как сохранить открытое окно div, используя angularjs

0 голосов
/ 25 февраля 2019

Код ниже работает очень.Он может открывать и закрывать всплывающее окно сообщения.

Теперь я хочу убедиться, что любое открытое всплывающее окно сохраняется при обновлении страницы на основе его идентификатора.Я думаю, что это работа местного хранилища.

В jquery , я могу сделать это с кодом ниже. 

<!doctype html>
 <html>
    <head>
        <title></title>

<style>
.contact_box {
  bottom: -5px;
   height:200px;
  background: black;
  color: red;
  border-radius: 5px 5px 0px 0px;
  display: inline-block;
position: fixed;
  width: 500px;
bottom: 0%
}
</style>
<script src='jquery-3.1.1.min.js' type='text/javascript'></script>
<script>
$(document).ready(function(){
    var persist = localStorage.getItem('persist');
    if(persist === 'true'){
        $('#mydiv').show();
    }

    $("#display").click(function(event){
        event.preventDefault();
        $('#mydiv').show();
        localStorage.setItem('persist', 'true');
    });

 $("#close").click(function(event){
        event.preventDefault();
        localStorage.removeItem('persist', 'false');
         $('#mydiv').hide();
    }); 

});
</script>

<div id="mydiv" class="contact_box" style="display:none;" >

      <br> Message ....</br>
<br> Message ....</br>
<br> Message ....</br>
<br> Message ....</br>
<br> Message ....</br>
<br> Message ....</br>

</div>
<h1>Refresh Page after you click on persist button</h1>
    <input type="button" value="Persist" id="display"/>
   <input type="button" value="close" id="close"/>



</body>

</html>

В Angularjs , это функции, которые я создал, но просто запутался в том, как применить их к существующему коду ниже 

// Persist any opened message box Div after page refresh using local storage

  $scope.persistDiv = localStorage.getItem($scope.arr);
   $scope.persistIt = function(id) {
    if ($scope.arr[id].popStatus == true) {
      $scope.arr[id].popStatus = false;

// set Local Storage for any open popup box via Id
localStorage.setItem(persistDiv);
    } else {
      $scope.arr[id].popStatus = true;

//remove local storage when a particular popup box is close 
localStorage.removeItem(persistDiv);
    }
  }

Вот код Angularjs, который показывает всплывающее окно для различных пользователей 

<!doctype html>
 <html ng-app="myapp">
    <head>
        <title></title>

<style>

.sidebar {
  width: 20%;
  position: fixed;
  height: 100%;
  right: 0px;
  top: 0px;
  padding-top: 50px;
  padding-bottom: 10px;
  border: 1px solid #b2b2b2;
  text-align: bottom;
}

.mainArea {
  position: fixed;
  width: 80%;
  bottom: 0%
}

.contact_box {
  position: relative;
  bottom: -5px;
  width: 250px;
  // height:auto;
  background: black;
  color: red;
  border-radius: 5px 5px 0px 0px;
  bottom: 0px;
  //right: 270px;
  display: inline-block;
}

</style>
  <script src="jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>
<script>
var app = angular.module('myapp', []);

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


  $scope.arr = [
    {      name: "user1",      popStatus: false,      hideBox: false    },
    {      name: "user2",      popStatus: false,      hideBox: false    },
    {      name: "user3",      popStatus: false,      hideBox: false    },
    {      name: "user4",      popStatus: false,      hideBox: false    }
  ];


  //pop div
  $scope.popIt = function(id) {
    if ($scope.arr[id].popStatus == true) {
      $scope.arr[id].popStatus = false
    } else {
      $scope.arr[id].popStatus = true;
    }
  }

  //hideUnhide message box
  $scope.hideUnhideIt = function(id) {
    ($scope.arr[id].hideBox == true) ? $scope.arr[id].hideBox = false: $scope.arr[id].hideBox = true;
  }

});


</script>
    </head>
<body>

<div ng-app="myapp" ng-controller="MainCtrl">

  <div class="sidebar">
    <ul>
      <li ng-repeat='ret in arr track by $index'>
        <div ng-click="popIt($index)">
          {{ret.name}}
          <!--           hide:{{ret.hideBox}}          -->
          <br><br>
        </div>
      </li>
    </ul>
  </div>

  <div class='mainArea'>
    <ng-controller ng-repeat='ret in arr track by $index'>
      <div ng-if="ret.popStatus == true" class="contact_box">
        <button style="float:right" ng-click="popIt($index)">Close</button>
        <button style="float:left" ng-click="hideUnhideIt($parent.$index)">hide/unhide</button>
        <br>
        <div ng-if="!ret.hideBox" style="height:auto;">

          <b>Username:</b> {{ret.name}}
          <br>Message .........<br>
          <br>Message .........<br>
          <br>Message .........<br>
          <br>Message .........<br>
          <br>Message .........<br>
          <br>Message .........<br>
        </div>
      </div>
    </ng-controller>
  </div>
</div>



</body>



</html>

1 Ответ

0 голосов
/ 25 февраля 2019

Когда вы запустите здесь фрагмент (из stackOverflow), вы получите ошибку " Не удалось прочитать свойство 'localStorage' из 'Window': документ помещен в" песочницу "и отсутствует флаг" allow-same-origin "."

Запустите его на локальном ПК, там он должен нормально работать. 

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

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

  //pop div
  $scope.popIt = function(id) {
    if ($scope.arr[id].popStatus == true) {
      $scope.arr[id].popStatus = false
    } else {
      $scope.arr[id].popStatus = true;
    }
    console.log($scope.arr);
    $scope.updateLocalStorage();
  }

  //hideUnhide message box
  $scope.hideUnhideIt = function(id) {
    ($scope.arr[id].hideBox == true) ? $scope.arr[id].hideBox = false: $scope.arr[id].hideBox = true;
    $scope.updateLocalStorage();
  }

  //called at initiazation, reads from localstorage if array is present there
  $scope.checkAndInitiateFromLocalStorage = function() {
    var readArrayStr = localStorage.getItem('messagingArray');
    if (readArrayStr && readArrayStr.length > 0) {
      $scope.arr = JSON.parse(readArrayStr);
    } else {
      $scope.arr = [{
          name: "user1",
          popStatus: false,
          hideBox: false
        },
        {
          name: "user2",
          popStatus: false,
          hideBox: false
        },
        {
          name: "user3",
          popStatus: false,
          hideBox: false
        },
        {
          name: "user4",
          popStatus: false,
          hideBox: false
        }
      ];
    }
  }

  //called at each update, stores the latest status in localstorage
  $scope.updateLocalStorage = function() {
    localStorage.setItem('messagingArray', JSON.stringify($scope.arr));
    /* console.log("updated local storage !!"); */
  }

  $scope.checkAndInitiateFromLocalStorage();

});
.sidebar {
  width: 20%;
  position: fixed;
  height: 100%;
  right: 0px;
  top: 0px;
  padding-top: 50px;
  padding-bottom: 10px;
  border: 1px solid #b2b2b2;
  text-align: bottom;
}

.mainArea {
  position: fixed;
  width: 80%;
  bottom: 0%
}

.contact_box {
  position: relative;
  bottom: -5px;
  width: 250px;
  background: black;
  color: red;
  border-radius: 5px 5px 0px 0px;
  bottom: 0px;
  display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.6/angular.min.js"></script>


<div ng-app="myapp" ng-controller="MainCtrl">

  <div class="sidebar">
    <ul>
      <li ng-repeat='ret in arr track by $index'>
        <div ng-click="popIt($index)">
          {{ret.name}}
          <!--           hide:{{ret.hideBox}}          -->
          <br><br>
        </div>
      </li>
    </ul>
  </div>

  <div class='mainArea'>
    <ng-controller ng-repeat='ret in arr track by $index'>
      <div ng-if="ret.popStatus == true" class="contact_box">
        <button style="float:right" ng-click="popIt($index)">Close</button>
        <button style="float:left" ng-click="hideUnhideIt($parent.$index)">hide/unhide</button>
        <br>
        <div ng-if="!ret.hideBox" style="height:auto;">

          <b>Username:</b> {{ret.name}}
          <br>Message .........<br>
          <br>Message .........<br>
          <br>Message .........<br>
          <br>Message .........<br>
          <br>Message .........<br>
          <br>Message .........<br>
        </div>
      </div>
    </ng-controller>
  </div>
</div>
...