javascript - 编译后 ng-click 多次触发-6ren

javascript - 编译后 ng-click 多次触发

转载作者：行者123 更新时间：2023-11-29 21:41:57

24

4

我已经阅读了很多 SO 答案，但无法解决问题。

我有一个 Javascript function创建 HTML类似 document.createElement(...) 的元素

这是该函数的一部分:

var div=document.getElementById(params.wrapper);
div.setAttribute("ng-controller","ProjectController");

var button = document.createElement('button');
button.setAttribute('id','btn-view-users-' + params.id);
button.className='button-manage-user';
button.setAttribute('ng-click','hello()');
div.appendChild(button);

此函数在应用程序启动时调用并创建许多行，因此当加载页面时，函数生成的 HTML 如下所示:(此示例代码经过简化以更易于理解 )

<div id="wrapper" class="wrapper ng-scope" ng-controller="ProjectController">
    <button id="btn-view-users-310" class="button-manage-user" ng-click="hello()">Manage Users</button>
    <button id="btn-view-users-311" class="button-manage-user" ng-click="hello()">Manage Users</button>
    <button id="btn-view-users-312" class="button-manage-user" ng-click="hello()">Manage Users</button>
    <button id="btn-view-users-313" class="button-manage-user" ng-click="hello()">Manage Users</button>
</div>

Angular Controller :

app.controller('ProjectController',
    ['$scope', '$http',
        function($scope, $http) {
             $scope.hello = function(){
                console.log("hello")
             }
        }
    ]
)

在创建所有元素后的函数末尾，我使用 :

进行编译

var content = $(".wrapper");
angular.element(document).injector().invoke(function($compile) {
    var scope = angular.element(content).scope();
    $compile(content)(scope);
    console.log("#compile")//log appears in the console 10 times if 10 elements are created.
});

但是当我点击按钮时，“hello”被触发了很多次!

如果我在页面上有 10 个元素，然后点击 第一个 元素，它会触发 10 次，如果我点击 < strong>second 元素它被触发 9 次 等等..

我试图移动 ng-controller按钮内的声明 button.setAttribute("ng-controller","ProjectController");或者甚至在 <body>标记，但我仍然得到相同的行为。

谢谢你的帮助

最佳答案

这是因为你正在编译 controller div，它将编译 ng-controller="ProjectController"指令并将注册您的实例 ProjectController编译 div 的次数。

你应该做 $compile(content.contents())(scope);而不是编译整个 Controller 元素。

但是compile元素应该只有一个根元素，就像在你的情况下你不能那样做，因为你想要编译的元素应该有一个根元素。其他应该是该根的子元素。

关于javascript - 编译后 ng-click 多次触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32483826/

24

4

0

文章推荐： javascript - 从同一个链接点击取不同的id

文章推荐： javascript - 在 AJAX 调用成功时弹出 Bootstrap 模式

文章推荐： javascript - 如果其他不适用于 CoffeeScript 的 Protractor

java - 用于构建项目的库？我可以使用 C++ 编译 C++，或者使用 python 编译 java，或者使用 C++ 编译 java，等等？
是否有任何库或框架旨在促进从另一种成熟的编程语言中构建项目？在 C++、java 等编程语言中指定逻辑、集合和复杂规则非常容易，但在 Makefile 中完成这些事情似乎是一场艰苦的战斗。我还没有深
c++ - 代码可以用 clang 编译，但不能用 gcc 编译
我有这段代码可以用 clang 编译得很好(即使使用 -Weverything)，但是 gcc 会发出错误。 #include #include #include using namespace
c++ - C 头文件不能用 C 编译，但可以用 C++ 编译
我有以下 block 头文件 BKE_mesh.h: /* Connectivity data */ typedef struct IndexNode { struct IndexNode *
c++ - 如果使用 Makefile 编译，代码可以正常工作，如果使用 XCode 编译，代码会崩溃
我在我的一个项目中遇到了一个奇怪的问题。我的代码库依赖于一个外部库，其中包含一个名为 Dataset 的类. Dataset类私有(private)继承自 std::vector (其中 Sample
c++ - C/C++ 项目可以使用 Xcode 编译，但不能使用 gcc/g++ 编译
当使用 gcc、g++ 或 make 在终端中编译一个小型 C 或 C++ 项目时，我收到以下错误: /tmp/ccG1caGi.o: In function `main': main.c:(.tex
emacs - 如何在 Windows 上为 Emacs 23.1.50 编译 CEDET 1.0pre7 编译？
我正在尝试从 CVS 为 Windows 上的 Emacs 23.1.50 编译 CEDET，但在“第 6 步:打开 EDE...”时出现错误:“defvar:作为变量的符号值是无效的:cedet-m
c - fflush(stdin) 不能在 cygwin 中用 gcc 编译，但可以用 visual studio 2010 编译
我正在(重新)学习编程，我从 C 开始。我的 IDE(如果我可以这么说)是 Windows7 上的 cygwin(32 位)和 Visual-Studio 2010。我总是编译我用 gcc (cygw
C++ GCC 为什么这段 sfinae 代码可以用 GCC 4.7 编译，但不能用 4.8 编译？
我喜欢在模板类中使用本地类来执行类似“static if”的构造。但是我遇到了 gcc 4.8 不想编译我的代码的问题。但是 4.7 可以。这个例子: #include #include #in
Java - 使用 java 1.4 编译 src/main/java 并使用 1.5 编译 src/test/java
我有一个项目，必须仅使用 java 1.4 进行编译。但我计划使用mockito 编写一些单元测试。我想要一种在 pom 中指定的方法，以便 src/main/java 使用 jdk 1.4 编译，但
PHP 编译
我想了解 PHP 编译过程是如何工作的。假设我有一个名为funcs.php 的文件并且这个文件有三个函数，如果我include 或require 它，所有的在文件加载期间编译三个函数？或者源代码会被
gcc/g++编译
编译工具链我们写程序的时候用的都是集成开发环境 (IDE: Integrated Development Environment)，集成开发环境可以极大地方便我们程序员编写程序，但是配置起来
scala - 编译 for 循环时出现奇怪的错误
当我编写一些 Scala 代码时，在尝试编译代码时收到一条奇怪的错误消息。我将代码分解为一个更简单的代码(从语义的角度来看这完全没有意义，但仍然显示了错误)。 scala> :paste // Ent
带注释的 SASS 编译
我正在编译一个 SCSS 文件，它似乎删除了我的评论。我可以使用什么命令来保留所有评论？ >SASS input.scss output.css 我在 SCSS 中看到两种类型的注释。 // Comm
编译 C 结构
这是我的代码: #include typedef struct { const char *description; float value; int age; } swag
Grails GSP 编译？
当您编译 grails war 时，我知道 .groovy 代码被编译为字节码类文件，但我不明白容器(例如 tomcat)如何在请求 GSP 时知道如何编译它们。容器了解 GSP 吗？安装在服务器上的
编译 : undefined reference to
我正在努力将多个文件编译成一个通用程序。我收到一个错误: undefined reference to 'pi' 这是我的代码和 Makefile 的框架。我做错了什么？谢谢! 文件:calcPi.c
编译 LD_PRELOAD 包装器的冲突类型
我尝试使用 LD_PRELOAD 来 Hook sprintf function ，所以我将打印到缓冲区的结果: #define _GNU_SOURCE #include #include int
javascript - CoffeeScript 编译
我正在寻找最简单的方法来自动将 CoffeeScript 重新编译为 JS。阅读documentation但仍然很难得到我想要的东西。我需要它来监视文件夹 src/ 中的任何 *.coffee 文
javascript - CoffeeScript 编译
我想使用定制waveformjs 。我发现this on SO但是，我不知道如何编译/安装波形来开始。我从 GitHub 克隆它并进行了更改，但是我不知道如何将其转换为 .js 文件。最佳答案为了
java - 编译/捕获异常
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关

首页

博学

6Ren·AI

商城

javascript - 编译后 ng-click 多次触发