Скрыть и показать элементы, используя значение

Question

У меня есть 2 простых элемента div. Мне нужно скрыть и показать их на основе URL.

<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 здесь )

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>