从 Angular 指令调用的函数访问属性/$element 上下文

Question

在directive definition 中，有一个用于访问$element 和$attrs 的API，因此您可以返回调用指令的元素。使用 ng-class 之类的标准指令调用自定义函数时，如何访问 $element 和 $attrs？

---

编辑：我知道这不是惯用的方法。这个问题适用于快速原型，这对 Angular 的许多功能都有很大的用处。只是不是关于可持续性、关注点分离等的那些。我主要关心的是速度。因此，能够使用内置指令和快速控制器方法快速完成某些事情实际上是一种美德，并且可以赢得在未来进行更全面、更正确实施的机会......

---

在这种情况下，我只是根据$location.path() 的值，根据this post 和this one 将上下文.active 类添加到导航元素。但是，在这些示例中，您需要显式且冗余地将href 属性的内容的副本作为参数传递给您从ng-class 调用的getClass() 函数。但是没有办法以编程方式从getClass() 中访问href 属性并避免将相同的内容作为arg 重复传递吗？

例如，具有getClass() 功能的控制器可以按照我想象的方式工作：

function navCtrl($scope, $routeParams) {
    $scope.getClass = function($element, $attrs) {
        if ($location.path().substr(0, path.length) == $attrs.href) {
            return "active"
        } else {
            return ""
        }
    }
}

然后你可以简单而优雅地调用它：

<a ng-class="getClass()" href="/tasks">Tasks</a>

而不是：

<a ng-class="getClass('/tasks')" href="/tasks">Tasks</a>

（我认识到另一种选择是创建一个自定义指令来执行此操作，但现在我只想弄清楚是否可以从被调用的控制器函数中访问 $attrs 和/或 $element一个指令。谢谢！）

Answer 1

你实际上可以这样做...... 但你不应该这样做。哈哈......

这里是如何做你所要求的......

在您的标记中，将 $event 传递给您的函数。

<a ng-click="test($event)" href="whatever">Click Me</a>

然后在你的控制器中，获取事件的目标元素：

$scope.test = function($event) {
    alert($event.target.href);
};

现在这就是你可能不应该这样做的原因：

如果您引用 DOM，或在控制器中操作 DOM，则会危及依赖注入以及 Angular 结构中关注点的分离。当然，如果您正在测试您的函数，您仍然可以将 $event 作为依赖项注入，但是根据您在该函数中所做的事情，您可能仍然破坏了您的 DI，并且您正在尝试让控制器执行指令工作（这是为了防止你的控制器与你的标记紧密耦合）

也就是说，如果您所做的一切只是获得一个值，那可能没问题，但您仍然在某种程度上将控制器与您的标记耦合。如果您对该 DOM 元素执行其他任何操作，那么您就没有保留。

Answer 2

我认为你做不到。角度哲学是避免直接从控制器访问 DOM。您已经确定了在 Angular 中执行此操作的两个选项：

• 将 href 作为参数传递，即 getClass('/tasks')
• 或者，编写自定义指令

或者，如果该类是纯粹的表现类并且不影响您的应用程序的运行方式，那么您可以忽略 Angular 并使用快速而肮脏的 jQuery 函数来为您完成这项工作。

缺乏与 DOM 的直接交互一开始可能有点奇怪，但从长远来看，随着代码库的增长、变得更加复杂和需要更多测试，这是天赐之物。

Answer 3

这是一个完全不同的答案：您不需要 Angular 来根据 href 更改样式。您可以为此使用 CSS 选择器。

按照你的风格：

a[href="/something"] {
    background-color: red;
}

结合你可能用 ng-class 做的任何事情应该就是你需要的一切。