在data-activates属性中创建与{{expression}}一起使用的自定义实现指令 [英] Creating a custom materialize directive that works with an {{expression}} in data-activates attribute

问题描述

我正在尝试使物化库与Angular一起使用.为此，我编写了一个属性指令，该指令将初始化元素上的下拉菜单.

I'm trying to get the materialize library to work together with Angular. To do so I've written an attribute directive that will initialize the dropdown menu on an element.

但是，在data-activates属性使用double-curly-brace表达式的情况下，伪指令将引发异常(请参阅dev工具).这是一个副本(也提供一个硬编码的工作版本，以供参考):

However, the directive throws an exception (see the dev tools) in the case where the data-activates attribute uses a double-curly-brace expression. Here's a repro (with, for reference, a hard-coded working version as well):

angular.module('foo', [])
  .directive('materialKebab', function() {
    return {
      link: function(scope, element, attrs) {
        $(element).dropdown();
      }
    };
  })
  .controller('bar', function($scope) {
    $scope.id = "abc123";
  });

.dropdown-button { cursor: pointer; background: #ddd; padding: 10px; display: inline-block; font-weight: bold; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>

<div ng-app="foo" ng-controller="bar">
  Doesn't work:
  <div class="dropdown-button" data-activates="item_{{id}}" material-kebab>⋮</div>
  <ul class="dropdown-content" id="item_{{id}}">
    <li>Action 1</li>
    <li>Action 2</li>
  </ul>
</div>
<hr>
<div>
  Hard coded one works:
  <div class="dropdown-button" data-activates="hardCodedId">⋮</div>
  <ul class="dropdown-content" id="hardCodedId">
    <li>Action 1</li>
    <li>Action 2</li>
  </ul>
</div>

例外来自jQuery(准确地说，是嘶嘶声):

The exception is from jQuery (Sizzle, to be precise):

错误:语法错误，无法识别的表达式:#item _ {{id}}

Error: Syntax error, unrecognized expression: #item_{{id}}

那么显然下拉菜单激活得太早了吗?我已尝试设置我的指令的priority ，以使其在正确填充其他属性后实现，但这似乎没有用.我还检查了带有角度的Github存储库-具体化功能，但在这种情况下似乎也没有特殊考虑.

So apparently the dropdown is being activated too early? I've tried setting a priority for my directive to try and make it happen after the other attribute was properly populated, but that didn't seem to work. I've also checked this Github repo with angular-materialize features, but it seems to have no special consideration for this case either.

对此有什么好的解决方案吗?还是我必须在调用dropdown()之前求助于观看$scope.id变量?

Is there any good solution to this? Or do I have to resort to watching the $scope.id variable before calling dropdown()?

推荐答案

进行了更多搜索，我找到了答案.这样张贴，是否对其他过路人有帮助，也许其他人可以提出更好的答案?

Some more searching, and I found the answer. Posting it as such, should it help any other passer-by, and perhaps someone else can come up with a better answer?

问题仅是两个问题的重复:

The question is just about a duplicate of a combination of two questions:

• 如何使用angular js动态设置HTML元素的id属性?
• (数据红色)属性中的角表达式

• How to set the id attribute of a HTML element dynamically with angular js?
• Angular expression in (data-, red) attribute

因此，只需在data-activates和id上都使用ng-attr-前缀，就可以了:

So, just use ng-attr- prefix on both data-activates and id and you're good to go:

angular.module('foo', [])
  .directive('materialKebab', function() {
    return {
      link: function(scope, element, attrs) {
        $(element).dropdown();
      }
    };
  })
  .controller('bar', function($scope) {
    $scope.id = "abc123";
  });

.dropdown-button { cursor: pointer; background: #ddd; padding: 10px; display: inline-block; font-weight: bold; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.js"></script>

<div ng-app="foo" ng-controller="bar">
  Now does work:
  <div class="dropdown-button" ng-attr-data-activates="item_{{id}}" material-kebab>⋮</div>
  <ul class="dropdown-content" ng-attr-id="item_{{id}}">
    <li>Action 1</li>
    <li>Action 2</li>
  </ul>
</div>

这篇关于在data-activates属性中创建与{{expression}}一起使用的自定义实现指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！