Question

我对这个指令定义对象感到困惑 - （restrict）。我创建了两个函数，第一个是restrict，另一个没有restrict。

当我运行此代码时，两个指令都返回相同的结果。

使用 restrict：

app.directive 'helloWorld', ->
  return {

    restrict: 'AE'
    link: (scope, elem, attrs) ->
       console.log "HELLO WORLD"

  }

没有 restrict：

app.directive 'helloWorld', ->
  return {

    link: (scope, elem, attrs) ->
       console.log "HELLO WORLD"

  }

有人可以告诉我这里发生了什么吗？ PS：我是棱角分明的新人。如果你可以帮助我，那真的很感激。

Answer 1

Restrict指的是指令应该匹配的元素类型，并且不会（以任何方式）影响指令的返回结果。来自angular docs:

'A' - only matches attribute name
'E' - only matches element name
'C' - only matches class name
'M' - only matches comment

这些限制可以根据需要合并：

'AEC' - matches either attribute or element or class name

Answer 2

指令可以在指令定义对象的restrict属性中指定它支持的4种匹配类型中的哪一种。

The default是EA。即，如果没有指定限制。

restrict选项通常设置为：

'A' - only matches attribute name
'E' - only matches element name
'C' - only matches class name
'M' - only matches the comment

这些限制可以根据需要合并：

＆＃39; AEC＆＃39; - 匹配属性或元素或类名 或（ECA - 订单并不重要）

source - Angularjs docs

app.directive 'helloWorld', -> return restrict: 'AE' link: (scope, elem, attrs) -> console.log "HELLO WORLD"

和

app.directive 'helloWorld', -> return link: (scope, elem, attrs) -> console.log "HELLO WORLD"

是相同的，没有区别。两者都可以用作

<helloWorld> ... </helloWorld>

或

<ANY helloWorld> ... </ANY>

说，如果你只有restrict E。然后指令功能仅适用于

<helloWorld> ... </helloWorld>

和

<ANY helloWorld> ... </ANY> // wont work since the directive is bound only to element

Answer 3

只是一个小提示：如果您以camelcase方式命名您的指令，则在html代码中使用它时需要将其替换为-，例如

<hello-world></hello-world>

将E值设置为restrict或

时

<ANY hello-world></ANY>

设置A值。

Angular Directive with＆＃34; restrict＆＃34;没有＆＃34;限制＆＃34;

3 个答案: