javascript - Angular Directive(指令)不限于 A 和 E

Question

我正在尝试执行此指令，但它没有像我预期的那样工作。

<nForm nform="tabs"></nForm>

directive('nForm',['$injector', function($injector){
     return {
        restrict: 'E',
        require: 'ngModel',
        template: "<div class='form-object'></div>",
        link: function(scope, element, attrs) {
           //some more code
        }
      };
])

在以下情况下不起作用:

<class="nForm" nform="tabs"></nForm>

directive('nForm',['$injector', function($injector){
     return {
        restrict: 'C',
        require: 'ngModel',
        template: "<div class='form-object'></div>",
        link: function(scope, element, attrs) {
           //some more code
        }
      };
])

有效。我做错了什么？

Answer 1

AngularJs 在命名指令和它的用法时有一个严格的风格要遵循。

每个大写字母的单词都应该用'-'分隔。

例如下面的指令声明

.directive('myCustomer', function() {
    //...
});

应该用作

 <my-customer ></my-customer>

在你的情况下它应该是

<n-form> <n-form>

进行这种转换的原因是，虽然 JavaScript 区分大小写，但 HTML 不区分大小写。因此，angular 在内部重命名标记引用，以便保留每个环境中的约定。