1

有没有办法编写只适用于特定元素 + 属性 + 属性值的指令？

我的第一个意图是为了模块化和维护目的而拥有单独的指令，但我担心这是不可能的，因为我从 Angular 收到一个错误，告诉我有多个指令与元素匹配。

所以我的场景如下：我想编写自己的输入元素，例如

<input type="time-picker"> <input type="date-picker">

所以我做了

app.directive('input', function () {
  return {
    restrict: 'E',
    templateUrl: function ($element, $attrs) {
      if ($attrs.type === 'date-picker' || $attrs.type === 'time-picker') {
        return $attrs.type + '.html';
      }
    },
    controller: function ($scope, $element, $attrs) {
      if ($attrs.type === 'date-picker') {
        console.log('date-picker');
      }
      else if($attrs.type === 'time-picker') {
        console.log('time-picker');
      }
    }
  }
});

只要页面中没有其他输入元素，这就会很好地工作。

如果我把

<input type="time-picker">
<input type="date-picker">

它工作正常。现在如果我添加

<input type="text">

整个页面挂起。

在这里查看我的小提琴：http: //jsfiddle.net/pWc3K/8/

4

2 回答 2

1

如果您将 html 更改为：

<input type="text" time-picker> <input type="text" date-picker>

然后你可以根据这些属性连接你的指令，如下所示：

app.directive('timePicker', function(){
    return {
        restrict: 'A',
        ...
    }
});
app.directive('datePicker', function(){
    return {
        restrict: 'A',
        ...
    }
});

将时间选择器/日期选择器放入元素的输入类型中并不是真正有效的。如果您阅读有关指令的角度文档，您会发现可以关联的不同事物的完整列表。这四个是：

E - Element name: <my-directive></my-directive>
A - Attribute: <div my-directive="exp"> </div>
C - Class: <div class="my-directive: exp;"></div>
M - Comment: <!-- directive: my-directive exp -->
于 2013-05-28T20:33:35.620 回答
0

尝试并理解在 AngularJs 中创建的自定义指令可能具有以下限制：

限制选项通常设置为：

'A' - 仅匹配属性名称

'E' - 仅匹配元素名称

'C' - 只匹配类名

'M' - 仅评论

这些限制都可以根据需要组合：例如：'AEC' - 匹配属性或元素或类名

于 2015-05-01T19:17:30.373 回答