4

我正在创建一个具有详细视图的应用程序，该视图显示为主视图上方的模式窗口。每个都有一个 URL，但如果直接从 URL 访问详细视图，我希望它作为主视图呈现。这个比喻在许多应用程序中都有使用，但 pinterest pin 是一个经典示例（尝试单击 pin，然后重新加载页面以查看差异）。

根据我收集到的信息，常规路由器功能不足以处理此问题，因此我编写了自己的指令来替换 ng-view。这是一个简化的代码示例：

app.directive('myModalView', ['$route', function($route) {
  return {
    link: function(scope, elem, attr) {
      var data = { modal: false };
      var first = true;
      scope.data = data;

      scope.$on('$routeChangeSuccess', function() {
        var current = $route.current.$$route;
        var template = current.templateUrl;

        data.modal = current.modal && !first;
        data.modal ? data.modalTemplate = template : data.mainTemplate = template;  

        first = false;
      });
    },
    template: '<div ng-include src="data.mainTemplate"></div>' +
              '<div ng-show="data.modal" ng-include src="data.modalTemplate"></div>',
  };
}]);

两个问题：

  • 这是正确的方法吗？有没有更“角度”的方式来做到这一点？
  • 上面的代码有一个关键问题——如果两个 URL 使用相同的模板，ng-include 不会刷新。在某些情况下，我的控制器在初始化和向视图提供不同数据时检查 URL 参数。有没有办法让 ng-include 刷新、重新初始化控制器或做其他事情来处理这种情况？

谢谢！

4

1 回答 1

0

您可能有兴趣查看UI-Router项目，它旨在用多个嵌套或并行的 ui-view 元素替换 ng-view

于 2013-06-14T02:22:58.550 回答