如何构建自定义 ng-view 指令，可能使用 ng-includes？答案

【问题标题】：How do a build a custom ng-view directive, possibly using ng-includes?如何构建自定义 ng-view 指令，可能使用 ng-includes？
【发布时间】：2013-05-19 04:27:48
【问题描述】：

我正在创建一个具有详细视图的应用程序，该详细视图显示为主视图上方的模式窗口。每个都有一个 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 刷新、重新初始化控制器或做其他事情来处理这种情况？

谢谢！

【问题讨论】：

标签： javascript html angularjs angularjs-directive

【解决方案1】：

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

【讨论】：