个人中心
gpt4 book ai didi

javascript - Angular ng-click 不适用于 $compile

转载 作者：搜寻专家 更新时间：2023-11-01 05:29:50 24 4
gpt4 key购买 nike

我有类似于以下代码的代码来触发 Angular 应用程序中的 click 事件。为什么事件没有触发？

var app = angular.module("myApp", [])

app.directive('myTop',function($compile) {
return {
    restrict: 'E',
    template: '<div></div>',
    replace: true,
    link: function (scope, element) {
        var childElement = '<button ng-click="clickFunc()">CLICK</button>';
        element.append(childElement);
        $compile(childElement)(scope);

        scope.clickFunc = function () {
            alert('Hello, world!');
        };
    }
}
})

最佳答案

像这样改变你的编译语句:

$compile(element.contents())(scope);

您传递的 DOM 字符串 childElement 实际上不是 DOM 元素，而是一个字符串。但是 $compile 需要 DOM 元素来实际编译内容。

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

app.directive('myTop', ['$compile',
  function($compile) {
    return {
      restrict: 'E',
      template: '<div></div>',
      replace: true,
      link: function(scope, element) {
        var childElement = '<button ng-click="clickFunc()">CLICK</button>';
        element.append(childElement);
        $compile(element.contents())(scope);

        scope.clickFunc = function() {
          alert('Hello, world!');
        };
      }
    }
  }
])
<html>

<body ng-app="myapp">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <my-top></my-top>
</body>

</html>

关于javascript - Angular ng-click 不适用于 $compile，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34192718/

24 4 0
文章推荐： javascript - 在内联 tinyMCE 中保留超链接导航
文章推荐： javascript - 卸载组件时取消图像加载
文章推荐： javascript - 为什么我不能在箭头函数中访问 `this`？
文章推荐： JavaScript - Math.cos(30) 的反转
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com