javascript - Angular 定义自己的指令

Question

我目前正在尝试在 Angular 中定义我自己的指令，它只不过是一个 console.log()。我尝试过以下方法:

log.directive.js:

export default function () {
    return {
        bindToController: {
            val: '=log-dir'
        },
        controllerAs: '$ctrl',
        template: "",
        controller: function () {
            console.log("test");
        }
    };
}

然后我导入指令:

import logDirDirective from '../../directives/log.directive';

并将其添加到我的模块中:

angular.module(MODULE_NAME).directive('log-dir',logDirDirective);

然后，在我的 HTML 中，我尝试将其用作:

<div class="......" log-dir>
</div>

我现在期望的是加载后在控制台中看到 test，但我没有。错误在哪里？

PS:请注意，我对 Angular 比较陌生，对自制指令也完全陌生，所以我的错误可能非常微不足道。

Answer 1

指令名称和绑定(bind)/范围配置必须符合规范化约定。这意味着该指令的正确定义应该是:

angular.module(MODULE_NAME).directive('logDir', logDirDirective);

绑定(bind)配置也是如此:

bindToController: {
    val: '=logDir'
},

检查"AngularJs directive naming conventions"问题以获取更详细的原因答案。

UPD。

以下是 @ 和 = 绑定(bind)变体的演示:http://plnkr.co/edit/mA0YnVhd7t241kdAvgRl?p=info