Angular HAML 中的指令语法

Question

我的语法不正确 - 如何向 haml 模板添加指令？

假设我有一个名为“我的指令”的指令。我想将其放入 haml 模板中。

尝试 1： 直接 html 语法

<my-directive></my-directive>

显然，行不通。

尝试 2： 作为 class

.my-directive

尝试 3： 使用 ng 语法

{:ng => 'my-directive' }

尝试 4： 使用数据

{ :ng => { :data => "newDirective" } }

尝试 5: 使用 html/haml 元素

%my-directive

尝试 6： 使用 ng

包装 div

%div{ :ng => 'my-directive' }

尝试 7： 使用数据 div 包装

%div{ :ng => { :data => "newDirective" } }

None 其中有效。

参考资源：

Using AngularJS within Haml views of a Rails app

Answer 1

实际上，我没有办法让它不起作用：

%my-directive

%span(ng-key="value")

%div{data: {ngKey: 'value', ng_foo: 'bar'}}

%div{ng: {foo: 'bar'}}

输出：

<my-directive></my-directive>
<span ng-key='value'></span>
<div data-ng-foo='bar' data-ngKey='value'></div>
<div ng-foo='bar'></div>

（使用 Haml 4.0.7）

Angular Directive Syntax in HAML