Question

我有一个关于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">会引发警报？由于路由及其内容是动态创建的，因此无法在其中添加控制器。

Answer 1

尝试查看this article是否对您有所帮助。看起来您可以通过在＆＃39; a＆＃39;上添加指令来增强行为。标记本身。

Answer 2

我假设您在自己的应用中使用了jQuery。

您可以将具有ng-include的元素上的click事件与这样的选择器绑定：

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

这应该适用于<a>内的任何$element标记，无论它是否在控制器初始化时都存在于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>

希望这有帮助。

AngularJS - 处理ngInclude内容

2 个答案: