在 AngularJS 中加载状态作为模态覆盖

Question

我想将状态加载为模态，以便我可以覆盖状态而不影响应用程序中的任何其他状态。例如，如果我有这样的链接：

<a ui-sref="notes.add" modal>Add Note</a>

然后我想使用指令中断状态更改：

.directive('modal', ['$rootScope', '$state', '$http', '$compile',
    function($rootScope, $state, $http, $compile){
        return {
            priority: 0,
            restrict: 'A',
            link: function(scope, el, attrs) {  
                $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
                    event.preventDefault();
                }); 
                el.click(function(e){
                    $http
                    .get('URL HERE')
                    .then(function(resp){
                        $('<div class="modal">' + resp.data + '</div>').appendTo('[ui-view=app]');
                        setTimeout(function(){
                            $('.wrapper').addClass('showModal');
                        },1);
                    });
                }); 
            }   
        }
    }
])

这成功地阻止了状态更改并加载 URL 并将其作为模式附加到应用程序。 问题是它会再次加载整个应用程序...

如何只加载状态？例如模板文件和相邻的控制器。

状态如下：

.state('notes.add',
{
    parent: 'notes',
    url: '/add',
    views: {
        'content': {
            templateUrl: 'partials/notes/add.html',
            controller: 'NotesAddCtrl'
        }
    }
})

---

如何使用 jQuery 工作的示例：http://dev.driz.co.uk/AngularModal

了解我如何通过 AJAX 访问 StateA 和 StateB 加载，该 AJAX 使用 History API 更改 URL 以反映当前状态更改。

并且无论我是在索引、StateA 还是 StateB 上，我都可以将 StateA 或 StateB 作为模式加载（即使我已经在那个 State 上）并且它不会更改 url 或当前内容，它只是覆盖状态内容。

这就是我希望在 AngularJS 中能够做到的。

注意。此示例不适用于浏览器的后退和前进按钮，因为它是一个快速示例并且没有正确使用历史 API。

Answer 1

几天前我看到了你的问题，尝试设置一些可行的方法似乎很有趣。

我以 uiSref 指令为起点，并修改了代码以使用 angular-bootstrap 的 $modal 来显示所需的状态。

angular.module('ui.router.modal', ['ui.router', 'ui.bootstrap'])
.directive('uiSrefModal', $StateRefModalDirective);

function parseStateRef(ref, current) {
  var preparsed = ref.match(/^\s*({[^}]*})\s*$/), parsed;
  if (preparsed) ref = current + '(' + preparsed[1] + ')';
  parsed = ref.replace(/\n/g, " ").match(/^([^(]+?)\s*(\((.*)\))?$/);
  if (!parsed || parsed.length !== 4) throw new Error("Invalid state ref '" + ref + "'");
  return { state: parsed[1], paramExpr: parsed[3] || null };
}

function stateContext(el) {
  var stateData = el.parent().inheritedData('$uiView');

  if (stateData && stateData.state && stateData.state.name) {
    return stateData.state;
  }
}

$StateRefModalDirective.$inject = ['$state', '$timeout', '$modal'];

function $StateRefModalDirective($state, $timeout, $modal) {
  var allowedOptions = ['location', 'inherit', 'reload'];

  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var ref = parseStateRef(attrs.uiSrefModal, $state.current.name);
      var params = null, url = null, base = stateContext(element) || $state.$current;
      var newHref = null, isAnchor = element.prop("tagName") === "A";
      var isForm = element[0].nodeName === "FORM";
      var attr = isForm ? "action" : "href", nav = true;

      var options = { relative: base, inherit: true };
      var optionsOverride = scope.$eval(attrs.uiSrefModalOpts) || {};

      angular.forEach(allowedOptions, function(option) {
        if (option in optionsOverride) {
          options[option] = optionsOverride[option];
        }
      });

      var update = function(newVal) {
        if (newVal) params = angular.copy(newVal);
        if (!nav) return;

        newHref = $state.href(ref.state, params, options);

        if (newHref === null) {
          nav = false;
          return false;
        }
        attrs.$set(attr, newHref);
      };

      if (ref.paramExpr) {
        scope.$watch(ref.paramExpr, function(newVal, oldVal) {
          if (newVal !== params) update(newVal);
        }, true);
        params = angular.copy(scope.$eval(ref.paramExpr));
      }
      update();

      if (isForm) return;

      element.bind("click", function(e) {
        var button = e.which || e.button;
        if ( !(button > 1 || e.ctrlKey || e.metaKey || e.shiftKey || element.attr('target')) ) {
          e.preventDefault();

          var state = $state.get(ref.state);
          var modalInstance = $modal.open({
            template: '<div>\
              <div class="modal-header">\
                <h3 class="modal-title">' + ref.state + '</h3>\
              </div>\
              <div class="modal-body">\
                <ng-include src="\'' + state.templateUrl + '\'"></ng-include>\
              </div>\
            </div>',
            controller: state.controller,
            resolve: options.resolve
          });

          modalInstance.result.then(function (selectedItem) {
            $scope.selected = selectedItem;
          }, function () {
            console.log('Modal dismissed at: ' + new Date());
          });
        }
      });
    }
  };
}

你可以这样使用<a ui-sref-modal="notes.add">Add Note</a>

指令需要angular-bootstrap 来解析模态对话框。您需要在您的应用中使用 ui.router.modal 模块。

Answer 2

既然被要求为我的评论提供一个例子，

指令示例

  myapp.directive('openModal', function ($modal) {
    return function(scope, element, attrs) {
      element[0].addEventListener('click', function() {
        $modal.open({
          templateUrl : attrs.openModal,
          controller: attrs.controller,
          size: attrs.openModalSize,
          //scope: angular.element(element[0]).scope()
        });
      });
    };
  });

示例 HTML

<button 
  open-modal='views/poc/open-modal/small-modal.html'
  open-modal-size='sm' 
  controller="MyCtrl">modal small</button>

上述指令方式与使用状态没有太大区别，状态有templateUrl和controller，只是url不变。

.state('state1.list', {
  url: "/list",
  templateUrl: "partials/state1.list.html",
  controller: function($scope) {
    $scope.items = ["A", "List", "Of", "Items"];
  }
})

Answer 3

显然有问题Ui-sref not generating hash in URL (Angular 1.3.0-rc.3) 指的是 https://github.com/angular-ui/ui-router/issues/1397

这似乎是根据 cmets 修复的。

我个人不喜欢html5mode，因为它需要在您的服务器上进行额外的工作而没有明显的优势（我不认为拥有“更漂亮的网址”作为有形优势来证明额外工作的合理性）。

使用路由器时还有另一个性能问题，即每次路由更改时都会重新创建视图 DOM。我提到了一个非常简单的解决方案 在this answer。

---

顺便说一句，http://dev.driz.co.uk/AngularModal/ 中的示例表现不佳。它不记录历史，所以我不能回去。此外，如果您单击 Index 或 modals 之类的链接，然后重新加载，则不会得到相同的页面。

---

更新。 从 cmets 看来，打开模式时不需要更改路线。在这种情况下，最简单的解决方案是不要将ui-sref 放在打开按钮上，而是让模态指令处理它。