Javascript 如何生成自定义ng视图指令（可能使用ng includes）？

我正在创建一个应用程序，它的详细视图显示为主视图上方的模式窗口。每个都有一个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>',
  };
}]);

app.directive（'myModalView'，['$route'，函数（$route）{
返回{
链接：功能（范围、要素、属性）{
var data={modal:false}；
var first=真；
scope.data=数据；
作用域.$on（“$routeChangeSuccess”，函数（）{
var current=$route.current.$$route；
var template=current.templateUrl；
data.modal=current.modal&&！first；
data.modal？data.modalTemplate=模板：data.mainTemplate=模板；
第一个=假；
});
},
模板：“”+
'',
};
}]);

两个问题：

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

---

谢谢

您可能对签出项目感兴趣，它旨在用多个嵌套或并行的ui视图元素替换ng视图