Question

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

但是，在data-activates属性使用双花括号表达式的情况下，该指令会抛出异常（请参阅开发工具）。这是一个repro（作为参考，也是一个硬编码的工作版本）：

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（Sizzle，确切地说）：

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

显然，下拉菜单过早被激活了？我已经尝试setting a priority我的指令试图在其他属性被正确填充后实现它，但这似乎不起作用。我也检查了this Github repo with angular-materialize features，但似乎没有特别考虑这个案例。

这有什么好的解决方案吗？或者，在致电$scope.id之前，我是否必须求助于dropdown()变量？

Answer 1

更多的搜索，我找到了答案。如此发布，是否应该帮助其他任何过路人，也许其他人可以提出更好的答案？

问题只是两个问题组合的重复：

所以，只需在ng-attr-和data-activates上使用id前缀，就可以了：

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}}一起使用的自定义materialize指令

1 个答案: