javascript - AngularJS 自定义属性名称问题

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>