保存当前选中的< li>在页面刷新后的Angular中

时间:2016-04-07 15:59:45

标签: javascript html angularjs

我有一个侧边栏,它是应用程序的全局,它的HTML在main.html中,我也有一个ui-view,根据状态注入部分HTML,如商店,零售商等的特定信息。 / p>

当我点击侧栏时< li>它们变得“活跃”并突出显示,而前一个元素变得“活跃”。它工作正常,但是,当我刷新我的页面时,“活动”< li>丢失,它返回默认的“活动”< li>。

我正在考虑每个控制器到页面,通过params传递的ID并将id标签分配给诸如<的元素。 id =“store_1”>,搜索特定元素并使其“有效”。然而,这部分是DOM操作,不应该在控制器上完成,但我不知道另一种选择!

编辑:我记得我现在可以在html文件上做一个简单的脚本并使用JQuery,但我认为这不是'最优的。

2 个答案:

答案 0 :(得分:3)

这很简单。看看window.sessionStorage。您可以存储当前所选项目的名称,然后将其检索。你可以写这样的工厂。

 .factory('ActiveState', function (){

   return {

     store_state: function(name){
       window.sessionStorage.setItem('name', name);
     },


    get_state: function(){
      return window.sessionStorage.getItem("name");
    }
   };
 });

答案 1 :(得分:1)

您可以创建一项服务来处理将当前选定的项目保存到您选择的持久存储中。它可能是饼干,网络存储,休息电话......



$JBOSS_MODULES\org\jboss\resteasy\resteasy-jaxrs\main\module.xml

angular.module('MyApp',[]).
controller('MyController',['MySelectionService',function(MySelectionService){
  var myController = this;
  myController.listItems= ["item1","item2","item3"];
  myController.selected = MySelectionService.getSelected();
  myController.changeSelection = function(selectedItem){
      MySelectionService.setSelected(selectedItem);
      myController.selected = MySelectionService.getSelected();
  };
  
}]).
service('MySelectionService',[function(){
  var mySelectionService = {};
  var selected = "item1";
  mySelectionService.getSelected = function(){
    /* Retrieve from persistant storage */
    return selected;
  };
  mySelectionService.setSelected = function(newSelection){
    /* Save to persistant storage */
    selected = newSelection;
  }
  return mySelectionService;
}]);

.selected{
  color:red;  
  
}
li{
  cursor: pointer;
}