Использование ui-router с модом Bootstrap-ui

Я знаю, что это освещалось много раз, и большинство статей ссылаются на этот фрагмент кода:Модальное окно с пользовательским URL в AngularJS

Но я просто не понимаю. Я не считаю это совершенно ясным. Я также нашел этоjsfiddle что на самом деле было здорово, очень полезно, за исключением того, что это не добавляет URL и позволяет мне использовать кнопку «назад», чтобы закрыть модал.

Изменить: Это то, что мне нужно помочь с.

Итак, позвольте мне объяснить, что я пытаюсь достичь. У меня есть форма для добавления нового элемента, и у меня есть ссылка «Добавить новый элемент». Я хотел бы, чтобы, когда я нажимал «добавить новый элемент», появлялось модальное окно с формой, которую я создал «add-item.html». Это новое состояние, поэтому URL-адрес меняется на / add-item. Я могу заполнить форму и затем выбрать сохранить или закрыть. Закрыть, закрывает модальное: p (как странно). Но я также могу щелкнуть назад, чтобы закрыть модальное окно и вернуться на предыдущую страницу (состояние). На данный момент мне не нужна помощь с Close, так как я все еще борюсь с тем, чтобы заставить модал работать.

Это мой код в таком виде:

Контроллер навигации:(это даже правильное место, чтобы поставить модальные функции?)

angular.module('cbuiRouterApp')
  .controller('NavbarCtrl', function ($scope, $location, Auth, $modal) {
    $scope.menu = [{
      'title': 'Home',
      'link': '/'
    }];

    $scope.open = function(){

        // open modal whithout changing url
        $modal.open({
          templateUrl: 'components/new-item/new-item.html'
        });

        // I need to open popup via $state.go or something like this
        $scope.close = function(result){
          $modal.close(result);
        };
      };

    $scope.isCollapsed = true;
    $scope.isLoggedIn = Auth.isLoggedIn;
    $scope.isAdmin = Auth.isAdmin;
    $scope.getCurrentUser = Auth.getCurrentUser;

    $scope.logout = function() {
      Auth.logout();
      $location.path('/login');
    };

    $scope.isActive = function(route) {
      return route === $location.path();
    };
  });

Вот как я активирую модал:

 <li ng-show='isLoggedIn()' ng-class='{active: isActive("/new-item")}'>
   <a href='javascript: void 0;' ng-click='open()'>New Item</a>
 </li>

новый item.html:

<div class="modal-header">
  <h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
  <ul>
    <li ng-repeat="item in items"><a ng-click="selected.item = item">{{ item }}</a></li>
  </ul>Selected:<b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
  <button ng-click="ok()" class="btn btn-primary">OK</button>
  <button ng-click="close()" class="btn btn-primary">OK</button>
</div>

Также, хотя это открывает модал, оно не закрывает его, так как я не мог решить это.

Ответы на вопрос(4)

Ваш ответ на вопрос