Question

我是AngularJS的新手，我正在尝试使用自定义元素属性的AngularJS行为。当我改变我创建的属性的名称时，我有这种奇怪的情况。我的初始代码是这样的。

HTML

<div ng-app="myApp">
    <div enter="panel" leave>Content</div>
</div>

的JavaScript

app.directive('enter', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('mouseenter', function() {
                element.addClass(attrs.enter); // <- I have put a breakpoint here for inspection
            });
        }
    }
});

app.directive('leave', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('mouseleave', function() {
                element.removeClass(attrs.enter);
            });
        }
    }
});

正如您所看到的，触发行为的属性名称为enter，这可以通过将类panel添加到div来按预期工作。（调试时会出现断点）但是当我尝试将属性的名称更改为更有意义的属性时会出现问题。

现在修改后的代码..

HTML

<div ng-app="myApp">
    <div onEnterAddCss="panel" leave>Content</div>
</div>

的JavaScript

app.directive('onEnterAddCss', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('mouseenter', function() {
                element.addClass(attrs.onEnterAddCss); // <- Breakpont here is never hit.
            });
        }
    }
});

app.directive('leave', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('mouseleave', function() {
                element.removeClass(attrs.onEnterAddCss);
            });
        }
    }
});

现在，当我将属性名称更改为onEnterAddCss时，这不起作用。断点永远不会受到打击。我很迷惑。属性可以有特定的字符长度吗？请帮忙。

Answer 1

与Angular的所有其他属性（例如指令）一样，您需要将其更改为小写和破折号：

<div ng-app="myApp">
    <div on-enter-add-css="panel" leave>Content</div>
</div>

Answer 2

这是由于角度归一化属性名称的原因。

https://docs.angularjs.org/guide/directive 向下滚动到标准化。

它本质上是在寻找名为on-enter-add-css

的属性

Answer 3

它与camelCase相关，在html中你的属性： on-enter-add-css 而非 onEnterAddCss

angular doc

AngularJS自定义属性名称问题

3 个答案: