Javascript angularjs ng单击不处理动态html元素

由于某些原因，当使用此函数（“testclickfn”）作为动态元素上的ng click时，它不会调用该函数。以下是angularjs文件：

app.controller('testctrl',function($scope){
     testfn($scope);

     $scope.showelements = function(){
        displayTestRows();
     }
});

function testfn($scope){
   $scope.testclickfn = function(){
     alert('testing click fn');
   };
}

function displayTestRows(){
   for(var i=0; i < 5; i++){
      $("#testdiv").append('<p ng-click="testclickfn()">click me</p><br>'); 
   }
}

app.controller（'testctrl'，函数（$scope）{
testfn（$范围）；
$scope.showelements=函数（）{
displayTestRows（）；
}
});
函数testfn（$scope）{
$scope.testclickfn=函数（）{
警报（“测试点击fn”）；
};
}
函数displayTestRows（）{
对于（变量i=0；i<5；i++）{
$（“#testdiv”）.append（“
click me

”）；
}
}

调用angularjs控制器“testctrl”的HTML页面：

<div id="testdiv" ng-controller="testctrl">
   <button ng-click="showelements()">Show dynamic elements</button><br>
</div>

显示动态元素

我假设由于“click me”标记是在angular加载页面后生成的，所以生成页面后它不知道任何事情，因此ng click=“testclickfn（）”不会在angularjs中注册

---

如何避免这种情况？

您正在以angular不知道的方式创建元素（非常糟糕的做法），但不用担心，您可以让angular知道

将控制器签名更改为

controller('testctrl', function($scope, $compile) {

然后手动运行编译新元素以激活

ng click

指令

$scope.showelements = function(){
    displayTestRows();
    $compile($("#testdiv").contents())($scope);
}

---

如果你说不出来，必须在你的控制器中使用jquery选择器是不好的，你应该使用一个指令和

link

函数将元素附加到作用域上（即，如果你有多个testctrl元素怎么办？），但是这会让你以angular不知道的方式运行你正在创建的元素（非常糟糕的做法），但不用担心，你可以让我知道

将控制器签名更改为

controller('testctrl', function($scope, $compile) {

然后手动运行编译新元素以激活

ng click

指令

$scope.showelements = function(){
    displayTestRows();
    $compile($("#testdiv").contents())($scope);
}

如果您不能判断，在控制器中使用jquery选择器是不好的，那么您应该使用指令和

链接

函数将元素附加到作用域（即，如果您有多个testctrl元素怎么办？），但这将使您运行

一般的规则是，任何JS都不应该位于angular函数之外，并且DOM操作（在适当的情况下）也应该由angular处理

示例1：强大的

创造
我将在这里创建可单击项。

在很多不同的东西之间共享东西的东西上使用控制器

  .controller('ctrl', ['$scope', '$compile', function($scope, $compile) {
    $scope.sharedVariable = 'I am #';

    $scope.show = function(where) {
      where = $(where).html('');

      //lets create a new directive, and even pass it a parameter!
      for (var index = 0; index < 5; ++index)
        $('<div>', {'test':index}).appendTo(where);

      $compile(where.contents())($scope);
    };
  }])

就这样，

一般的规则是，任何JS都不应该位于angular函数之外，并且DOM操作（在适当的情况下）也应该由angular处理

示例1：强大的

创造
我将在这里创建可单击项。

在很多不同的东西之间共享东西的东西上使用控制器

  .controller('ctrl', ['$scope', '$compile', function($scope, $compile) {
    $scope.sharedVariable = 'I am #';

    $scope.show = function(where) {
      where = $(where).html('');

      //lets create a new directive, and even pass it a parameter!
      for (var index = 0; index < 5; ++index)
        $('<div>', {'test':index}).appendTo(where);

      $compile(where.contents())($scope);
    };
  }])

---

---

就是这样，

您是否尝试使用“ng”代替“displayTestRows（）”？如果运行

$scope.$apply（）；

就在for的

之后？@SamuelRoberto否，因为我需要知道如何将动态创建的内容/指令绑定到angularjs。@jpacareu我将该代码放在for循环之后的行中，它不起作用。您是否尝试使用“ng for”而不是“displayTestRows（）”？如果运行
$scope.$apply（）；
就在for

的

之后？@SamuelRoberto不，因为我需要知道如何将动态创建的内容/指令绑定到angularjs。@jpacareu我把代码放在for循环之后的行中，它不起作用。谢谢。我知道它不好，我不熟悉angular，也不知道如何在时间紧迫的情况下完成一些工作。所以我正在抄近路，学习我也喜欢新事物，哈哈。谢谢。我非常喜欢人们回答这个问题，而不是说“你不应该那样做”，以防万一有人真的需要这么做。但如果没有，我就警告说实际上还有更好的方法。我必须更改控制器标志…再次感谢。但问题是，我怎么才能用正确的方法处理angularjs？是的，
$compile
不可用吗？是的，你需要问angular将为您提供其API。
$rootScope
，
$compile
，
$routeProvider
，它们都不在全局范围内（例如jquery的
$（）
）。这是一件好事，因为它可以为您提供更好的错误消息，例如，如果您试图在
配置
函数中使用
$rootScope
，或者其他一些不起作用的功能。谢谢。我知道这是不好的，我不熟悉角度和时间限制来完成一些工作。所以我正在抄近路，学习新的东西谢谢。我非常喜欢别人回答这个问题，而不是说“你不应该那样做”，以防万一有人真的需要这么做。但如果没有，我就警告说实际上还有更好的方法。我必须更改控制器标志…再次感谢。但问题是，我怎么才能用正确的方法处理angularjs？是的，
$compile
不可用吗？是的，你需要问angular将为您提供其API。
$rootScope
，
$compile
，
$routeProvider
，它们都不在全局范围内（例如jquery的
$（）
）。这是一件好事，因为它可以为您提供更好的错误消息，例如，如果您试图在
配置
函数中使用
$rootScope
，或者其他无法使用的功能