Question

使用angular指令时，我发现了一种奇怪的行为。

在下面的代码中

HTML

<body ng-app="loadTweetsModule">
    <div tweets> Load </div>
    <div loadTweets> loadTweets </div>
</body>

的Javascript

var loadTweetsModule = angular.module("loadTweetsModule",[]);


loadTweetsModule.directive('tweets',function(){
    return {
        link : function(scope,element){
            element.bind("mouseenter", function(){
                console.log("tweets");
            });
        }
    };
});

loadTweetsModule.directive('loadTweets',function(){
    return {
        link : function(scope,element){
            element.bind("mouseenter", function(){
                console.log("loadTweets");
            });
        }
    };
});

JSFiddle Link

除了名称之外，两个指令loadTweets和tweets是相同的。指令tweets按预期工作，但loadTweets不起作用。我无法找出这种行为的原因。有人可以解释一下吗？

Answer 1

如果你用js loadTweets写作，你应该用html load-tweets

写

来自http://docs.angularjs.org/guide/directive

指令有诸如ngBind之类的骆驼名称。该指令可以通过将驼峰案例名称翻译成蛇案例来调用特殊字符：， - 或_。可选地，指令可以是以x-或数据为前缀，使其符合HTML验证器。这里是一些可能的指令名称列表：ng：bind，ng-bind， ng_bind，x-ng-bind和data-ng-bind。

如果我们更改名称，Angular指令不起作用

1 个答案: