Question

我们有一个网站，可以手动将角度模块引导到文档级别。每个页面上的此模块中有多个控制器。这不是单页面应用程序，它有一个传统的菜单，不同的页面加载不同的控制器。

在过去几年中，这种设置很好地为我们服务，但是现在我们正在为分面搜索添加一个新的控制器，它使用html5Mode = true。这具有接管网站上所有链接的效果。

一种解决方案是创建一个指令，将目标动态应用于站点上的每个链接。 Angular不会接管与目标的链接。我们不喜欢这种解决方案，因为该网站在不同的位置使用不同的目标。

我们实施的解决方案涉及将控制器分组到模块下。由于Angular不允许嵌套模块，我们通过类引导每个模块（即任何给定的页面可能有多个包含多个控制器的模块）。

以下是：

angular.element(document).ready(function () {
    angular.bootstrap($('.moduleA'), ['moduleA']);
    angular.bootstrap($('.moduleB'), ['moduleB']);
});

主要问题：

令人惊讶的引导思想是有效的，但是我不了解内部工作原理，如果这种方式引导是负面的。有些页面具有相同的模块，可以将不同的div提升4或5倍。它有效，但可以吗？

e.g。这是否会产生大量的开销或其他副作用？

Answer 1

是的，对应用程序之间共享的内容会产生一系列副作用，因此必须进行同步，例如：窗口位置和滚动。这很可能是XY问题，每页多个应用程序看起来像是一个糟糕的解决方案（以及几乎所有其他可能的情况）。

target属性和绝对链接是阻止$location捕获链接的最受欢迎且最可靠的解决方案。很清楚地看到here为什么会这样。

使用此rel="external" convention之后的指令（特别是backed by jQuery）可以轻松解决问题，同时保持现有target属性不变。

// <a external href="...
// <a rel="external" href="...
// <a data-rel="external" href="...
app.directive('a', function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            var relExternal = attrs.rel && attrs.rel.split(/\s+/).indexOf('external') >= 0;
            if (!('target' in attrs) && (relExternal || 'external' in attrs)) {
                attrs.$set('target', '_self');
            }
        }
    };
});

可以反过来做同样的事情，即除了内部链接以外的任何地方启用target。

AngularJS：我可以手动将模块手动连接到多个元素而没有副作用吗？

1 个答案: