使用“ location.hash”值隐藏和显示元素

Question

我有2个简单的div元素。我需要根据网址进行隐藏和显示。

<div ng-app="myApp" ng-controller='myController'>
  <div ng-show="addnotes" class="block"> 
   paragraph 1
  </div>

  <div ng-show="!addnotes" class="block">
  paragraph 2
  </div>

  <button ng-click='clickme()'>
  Add Notes
  </button>
</div>

页面加载时将显示paragraph 2 div元素。单击Add notes按钮时，我需要将location.hash的值添加为addnotes。一旦添加此条件应该更改为$scope.addnotes=true;，以便切换div元素。

我已经做到了，而且工作正常。 但是我的问题是，只有在添加哈希值后刷新页面，它才能工作。

I need to do this without refreshing the page。该怎么办？任何帮助，谢谢！！

样本小提琴：https://jsfiddle.net/70Luf7hu/59/

Answer 1

它应该与函数调用表达式一起使用，并且您不应该过分使用 location 对象，而应使用 $ location 服务（如AngularJs文档here中所建议）

Js：

app.controller('myController',function($scope,$location){
    $scope.addnotes=false;
  $scope.clickme = function(){
  $location.hash('addnotes')
  }
  $scope.addnotes = function(){
   return $location.hash()=='addnotes';
  //location.reload();
  }

HTML：

  <div ng-show="addnotes()" class="block"> 
   paragraph 1
  </div>

  <div ng-show="!addnotes()" class="block">
  paragraph 2
  </div>

  <button ng-click='clickme()'>
  Add Notes
  </button>