Question

我正在使用两个指令来优化应用程序上的图像加载。

第一个被称为srcResponsive（根据我的页面的宽度/高度选择要加载的格式图像），第二个叫做lazySrc（只有在页面上可见时才允许加载图像）。

当我单独使用它时效果很好：

<img src-responsive="[['small', '{{picture.small}}'], ['medium', '{{picture.medium}}'], ['large', '{{picture.large}}']]" />

<img lazy-src="{{server_address}}{{tweet.picture.medium}}" />

但我想只在一个img元素上使用它们，也就是说应用这两个指令而不必更改我的两个指令的代码，以便让它们独立。

有可能吗？

谢谢

Answer 1

由于他们都以创造性的方式更新了src，因此如果他们彼此不了解就很难使用它们。

我觉得最好的方法是将指令组合成一个带有可选参数的指令。我们称之为optimal-src。你可以使用这样的东西：

<img optimal-src="{{defaultUrl}}" src-responsive="[...]" /> // only use responsive features
<img optimal-src="{{defaultUrl}}" lazy /> // use only the lazy features
<img optimal-src="{{defaultUrl}}" src-responsive="[...]" lazy /> //use both

Answer 2

也许有助于了解：

指令可能具有优先级属性（priority: 0,）。因此，优先级越高（不确定更高或更低的胜利......），它的处理时间越早。因此，如果一个元素有两个指令，优先级将决定谁先来。（http://amitgharat.wordpress.com/2013/06/08/the-hitchhikers-guide-to-the-directive/见“蓝图”）

指令可以在内部使用其他指令。我没有很好的例子。但Angular UI Bootstrap PopOver使用Angular UI Bootstrap Tooltip - 也许这会有所帮助。 https://github.com/angular-ui/bootstrap/blob/master/src/popover/popover.js

在同一元素上使用两个Angular指令

2 个答案: