如何使用angularjs保持打开div框

问题描述 投票：0回答：1

下面的代码非常有效。它可以打开和关闭弹出消息框。

现在我想确保根据其Id在页面刷新时保留任何打开的弹出框。我想这是本地存储的工作。

在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>
javascript angularjs popup local-storage
1个回答
1
投票

当您在此处运行代码段（来自stackOverflow）时，您将收到错误“无法从'Window'读取'localStorage'属性：文档是沙箱并且没有'allow-same-origin'标志。”

在本地PC上运行它，它应该在那里运行良好。

  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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.