Question

我正在制作一个与ng-if类似的属性指令。

window-match-media="(min-width: 400px)"

如果媒体查询匹配则会使元素呈现，否则将消失。我正在为ngIf

的代码建模我的指令

除非我必须在一对额外的引号中附加媒体查询，否则它的效果非常好。这是因为没有它，它似乎试图parse the attribute value。这对ngIf有意义，但在我的情况下，我想简单地将值视为字符串。

我在ngIf代码库中看不到任何可以指示不应该解析该值的内容，并添加

  scope: {
    windowMatchMedia: '@',
  },

没有帮助（我不确定属性指令是否可以隔离范围？）。

我通过$attributes参数将值访问指令的link函数，总是似乎将其作为字符串提供，但如果我没有专门制作它一个有引号即

window-match-media="'(min-width: 400px)'"

在我的指令因解析问题而有机会运行之前，我收到错误。 如何告诉属性指令不解析其值？我在$ compile docs中没有看到任何相关内容。

编辑：这是一个Plunkr，展示了这个问题。在我按照我想要的方式工作并记录它之后，我应该开源。

If I surround the attribute in quotes it works因为解析器将其检测为字符串。但我不想让解析器参与其中。我想写一个常规的ol'属性值。

我希望第一个示例中的属性语法有效。

Answer 1

插件中的示例有问题：

$scope.$watch($attr.windowMatchMedia, windowMatchMediaWatchAction);

这里的错误是属性值被提供给$scope.$watch - 如果它不是有效的表达式，将导致解析错误。

如果不需要插入指令属性，则不应将其绑定到范围。相反，可以使用$attr.$observe：

$attr.$observe('windowMatchMedia', windowMatchMediaWatchAction);

虽然

  scope: {
    windowMatchMedia: '@',
  },

是使用单向绑定执行此操作的正确方法，尽管隔离范围限制了指令的使用方式。它允许提供window-match-media作为表达式doesn't require to use quotes for strings。

不对范围施加限制的通用配方允许在指令属性中使用表达式$attr.$observe。

var windowMatchMedia = $interpolate($attr.windowMatchMedia)($scope);
$window.matchMedia(windowMatchMedia);