Question

我已经浏览过AngularJS教程，并仔细阅读了很多文档，但我还谈到了如何以“Angular方式”将某些部分组合在一起。＆＃34; < / p>

以下是基本用例（主要由现有产品和我无法控制的CMS确定）：

我希望能够定位到页面的某个区域，然后劫持＆＃34;那里的链接。当用户单击链接时，我需要异步获取href的内容（返回HTML响应），然后将该HTML有效负载加载到链接的target属性中指示的另一个区域

所以，给定这个示例标记：

<div class="nav" hijack-links>
    <a target="mainContent" href="path/to/foo.html">Link 1</a>
    <a target="secondaryContent" href="path/to/bar.html">Link 1</a>
</div>

...

<div my-content-area="mainContent">

</div>

...

<div my-content-area="secondaryContent">

</div>

用户点击＆＃34;链接1＆＃34;，获取path/to/foo.html的内容，然后将其放入mainContent。

这甚至是Angular的一个很好的用例吗？我查看了路由系统，但是需要被劫持的链接非常难以预测，而且几乎不可能预测模式。

修改已更新为Plunker

Plunker展示了我的尝试。我可以使用jQuery将$ http响应的内容转储到目标容器中，但这看起来并不像＃34; Angular＆＃34;方式。

对于它的价值，这将是对现有网站和CMS的改造，因此需求很窄。

ngClick似乎不方便，因为我无法将其附加到每个链接。可以在容器内插入不确定数量的链接。我需要能够捕获更高级别的DOM，而不是单独附加。

Answer 1

最简单的解决方案是在链接上使用ngClick指令来设置范围变量，然后使用ngInclude指令从服务器异步获取并显示html页面：

<div class="nav">
  <a ng-click="mainContent = 'foo.html'" href="">Link 1</a>
  <a ng-click="secondaryContent = 'bar.html'" href="">Link 2</a>
</div>

<div ng-include="mainContent">
</div>

<div ng-include="secondaryContent">
</div>

Here是一名工作人员。

Answer 2

对于它的价值，这是一个使用ngInclude的解决方案，这是在元素（plunker）内的给定网址中包含内容的“角度方式”：

myApp.directive('contentArea', function() {
  return {
    restrict: 'A',
    scope: {
      contentArea: '@'
    },
    transclude: true,
    template: '<div ng-include="$parent.hijackLinks[contentArea]"></div>'
  };
});

myApp.directive('hijackLinks', function() {
  return {
    link: function(scope, element, attr) {
      scope.hijackLinks = {};
      element.bind('click', function(e) {
        e.preventDefault();
        scope.$apply(function() {
          scope.hijackLinks[e.target.target] = e.target.href;
        });
      });
    }
  };
});

此解决方案的一个问题是它不会在“内容区域”标记中显示原始内容（从而使转换无用）。解决此问题的一种方法是将模板字符串更改为：

<div ng-transclude ng-if="!$parent.hijackLinks[contentArea]"></div>
<div ng-include="$parent.hijackLinks[contentArea]"></div>

我不确定我会称这是一个优雅的解决方案，但它确实使用指令和范围而不是使用jQuery进行DOM操作。

AngularJS，链接劫持和HTML响应

2 个答案: