2

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

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

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

例如，具有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 。谢谢！）

4

3 回答 3

5

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

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

在您的标记中，将 $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 元素做任何其他事情，你就没有保留。

于 2012-10-26T01:06:24.480 回答
2

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

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

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

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

于 2012-10-25T23:20:02.040 回答
0

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

在你的风格中：

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

这与您可能对 ng-class 所做的任何事情相结合应该是您需要的一切。

于 2012-10-26T11:32:27.527 回答