为什么可以'；我在AngularJS链接函数中使用香草javascript（eventlistener）吗？

所以我只是在测试一些东西，我在写一个指令，像这样：

HTML

但是onclick函数从不启动。我知道这不是我应该用Angular写的，但这只是我在飞行中做的事情。然而，这是可行的：

angular.module("app", [])

.directive("myDirective", function () {
    return {
        scope:true,
        restrict: "E",
        link: function (scope, elem, attr) {

            scope.name="yourname";
            elem.on("click", function () {console.log("change name")});
        }

    }
})

这里有一把小提琴：

这是怎么回事？它是否在角度世界之外，我应该使用

范围。应用
或其他方法使其工作。我只是好奇为什么香草javascript在这种情况下不好。但这也是一个很好的教训，让我专注于思考角度

也许有人能解释发生了什么？
TIA
这是因为
elem
内部链接函数是一个jQuery对象。您应该使用
elem[0]
获取HTMLDOM元素，然后重试

angular.module("app", [])

.directive("myDirective", function () {
    return {
        scope:true,
        restrict: "E",
        link: function (scope, elem, attr) {
            scope.name="yourname";
            elem[0].onclick = function () { console.log("change name");}
        }

    }
})

这是因为
elem
内部链接函数是一个jQuery对象。您应该使用
elem[0]
获取HTMLDOM元素，然后重试

angular.module("app", [])

.directive("myDirective", function () {
    return {
        scope:true,
        restrict: "E",
        link: function (scope, elem, attr) {
            scope.name="yourname";
            elem[0].onclick = function () { console.log("change name");}
        }

    }
})

这里有一个新的提琴，可以让您的原始代码正常工作，但问题中的代码现在看起来非常不同

一个问题是您的“name”属性没有绑定，因为您有一个隔离作用域在其中设置name，但随后transclude:true导致angular绑定到外部作用域，因此该名称从未显示。此外，没有模板拉入转置的内容，留下一个空的html元素。这个新的fiddle主要是您的原始代码，但事件处理程序的工作方式与另一个发布的答案中的dom元素不同


角度模块（“应用程序”，[]）
.指令（“myDirective”，函数（）{
返回{
是的，
限制：“A”，
模板：“”，
链接：功能（范围、要素、属性）{
log（“link run！”）；
scope.name=“miek”；
console.log（范围）；
元素on（'mouseenter'，function（）{
控制台日志（“输入”）；
})
}
}
})
你好{{name}}！
这里有一个新的提琴，可以让您的原始代码正常工作，但问题中的代码现在看起来非常不同

一个问题是您的“name”属性没有绑定，因为您有一个隔离作用域在其中设置name，但随后transclude:true导致angular绑定到外部作用域，因此该名称从未显示。此外，没有模板拉入转置的内容，留下一个空的html元素。这个新的fiddle主要是您的原始代码，但事件处理程序的工作方式与另一个发布的答案中的dom元素不同


角度模块（“应用程序”，[]）
.指令（“myDirective”，函数（）{
返回{
是的，
限制：“A”，
模板：“”，
链接：功能（范围、要素、属性）{
log（“link run！”）；
scope.name=“miek”；
console.log（范围）；
元素on（'mouseenter'，function（）{
控制台日志（“输入”）；
})
}
}
})
你好{{name}}！

提琴对我不起作用，但我希望你需要做elem[0]。onclick-因为elem是一个jqLite包装的对象。旁白：你在做

restrict:“E”

，但你的标记将它用作

属性，或者
restrict:“a”
——编辑：你的问题是对的，你的提琴是错的。抱歉搞砸了哈。。我看了这个问题，检查了元素/属性，看对了，然后在JSFIDLE中没有注意到：）使用Restrict E，链接函数永远不会执行。FIDLE与这里的代码不同。。。这可能就是造成混淆的原因。小提琴对我不起作用，但我希望你需要使用elem[0]。onclick-因为elem是一个jqLite包装的对象。旁白：你在做
restrict:“E”
，但你的标记将其用作
属性，或者
restrict:“a”
——编辑：你的问题是对的，你的小提琴错了。抱歉搞砸了哈。。我看了这个问题，检查了元素/属性，看对了，然后在JSFIDLE中没有注意到：）使用Restrict E，链接函数永远不会执行。FIDLE与这里的代码不同。。。这可能就是困惑的根源。是的，这就是我一直在寻找的答案。我根本不清楚
elem
是一个jQuery对象，所以我猜
attr
也是一个jQuery对象？
attr
是一个包含指令中提供的所有属性键/值对的对象。是的，这就是我想要的答案。我根本不清楚
elem
是一个jQuery对象，所以我猜
attr
也是一个jQuery对象？
attr
是一个包含指令中提供的所有属性键/值对的对象。您好，我很感谢您的帮助，但我贴错了小提琴。问题是对的，小提琴是错的。很抱歉。请参阅我的原始问题的已接受答案。好吧，那么您的问题不需要执行转置？似乎很快，您就会意识到事件处理程序可以工作，但指令最终不会执行您想要的操作，但可能不会。我只是觉得它应该使用转置以及事件处理程序。不，抱歉混淆了。我正试图深入了解指令，所以我对每件事都做了手脚，有时我会忘记我做了什么。嗨，我很感谢你的帮助，但我贴错了小提琴。问题是对的，小提琴是错的。很抱歉。请参阅我的原始问题的已接受答案。好吧，那么您的问题不需要执行转置？似乎很快，您就会意识到事件处理程序可以工作，但指令最终不会执行您想要的操作，但可能不会。我只是觉得它应该使用转置以及事件处理程序。
angular.module("app", [])

.directive("myDirective", function () {
    return {
        scope:true,
        restrict: "E",
        link: function (scope, elem, attr) {
            scope.name="yourname";
            elem[0].onclick = function () { console.log("change name");}
        }

    }
})

angular.module("app", [])

.directive("myDirective", function () {
    return {
        transclude: true,
        restrict: "A",
        template: '<div ng-transclude></div>',
        link: function (scope, elem, attr) {
            console.log("link ran!");
            scope.name = "miek";
            console.log(scope);
           elem.on('mouseenter', function() {
               console.log("entered");
            })
        }

    }
})

<div ng-app="app">
    <div my-directive>
        hi {{name}}!
    </div>
</div>