AngularJS - 处理 ngInclude 内容答案

【问题标题】：AngularJS - handle ngInclude contentAngularJS - 处理 ngInclude 内容
【发布时间】：2014-09-20 16:21:36
【问题描述】：

我有一个关于 ngInclude 和处理该指令包含的内容的问题。

我的情况如下代码：我有

<div ng-include="route" ng-controller="SomeCtrl"></div>

和

<table>
    <tr>
        <td><a href="/asdf/asdf/sd.html"></td>
    </tr>
</table>

所有内容都包含在内，但我无法实现为通过 ngInclude 包含的所有链接添加 event.preventDefault(); 的意图。

我以为我可以简单地做到这一点

.controller('WindowContentCtrl', function($element){
    console.log($element);
    $('a').click(function(event){
        event.preventDefault();
        alert(this.href);
    });
})

但是这样做的结果是除了包含的链接之外的每个链接都会引发警报。

有什么想法可以让我意识到只有<a href="/asdf/asdf/sd.html"> 会引发警报？由于路由及其内容是动态创建的，因此无法在其中添加控制器。

【问题讨论】：

您不会在控制器内部进行 DOM 操作或绑定，这不是它们的用途。您为此使用指令，因为它们将在链接方法中公开并返回元素。 docs.angularjs.org/guide/directive
但这意味着我必须为我的应用程序中的每种类型的按钮或链接创建一个新指令？
不，如果你只是想绑定 click 在东西上，那么 Angular 作为已经 ng-click 的指令。如果你想对所有页面做一些 DOM 操作，你可以在 body 标签上有一个自定义指令，例如，在那里做你的事情。

标签： javascript jquery angularjs angularjs-ng-include

【解决方案1】：

试试看this article 对你有没有帮助。看起来您可以通过在“a”标签本身上添加指令来增强行为。

【讨论】：

【解决方案2】：

我假设你在你的应用程序中使用了 jQuery。

您可以使用这样的选择器在具有ng-include 的元素上绑定点击事件：

.controller('SomeCtrl', function ($element) {
  $element.on('click', 'a', function (e) {
    e.preventDefault()
    alert(this.href);
  });
});

这应该适用于$element 中的任何<a> 标签，无论它在控制器初始化时是否已经存在于DOM 中。

或者如果你觉得在控制器中这样做不合适，你可以编写一个自定义指令：

.directive('preventClicking', function () {
  return {
    restrict: 'A',
    link: function (scope, element) {
      element.on('click', 'a', function (e) {
        e.preventDefault()
        alert(this.href);
      });
    }
  };
});

然后像这样使用它：

<div ng-include="route" ng-controller="SomeCtrl" prevent-clicking></div>

希望这会有所帮助。

【讨论】：