ng-click在新添加的元素上无效。

16 浏览
0 Comments

ng-click在新添加的元素上无效。

当我将ng-click与按钮一起添加时，为什么它不起作用？当我最初加载按钮时，相同的ng-click是有效的。\n

app.controller('demoCtrl', function() {
          this.clk = '';
          this.click = function() {
            alert('点击了');
          }
})
 app.directive('btnClick', function() {
          return {
            restrict: 'A',
            scope: {
              actionBtn: '='
            },
            link: function(scope, element, attrs) {
              element.append(scope.actionBtn);
            }
          }
})

\nHTML\n

\nhttp://plnkr.co/edit/QPKXfGd9s7HzLvEfKvbG?p=preview\n更新\n我也尝试了这种方式，但没有成功\n

element.append($compile(scope.actionBtn)(scope));

0

1 答案

0 Comments

当使用AngularJS动态追加的元素时，ng-click指令可能会失效。这是因为AngularJS需要编译新创建的DOM元素才能使其生效。

解决这个问题的方法是使用$compile服务来编译新的DOM元素。可以在指令的link函数中使用$compile服务来编译元素。具体的解决方法如下所示：

app.directive('btnClick', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.append($compile(scope.$eval(attrs.actionBtn))(scope));
        }
    }
}])

上述代码中，通过调用$compile服务来编译scope.$eval(attrs.actionBtn)所返回的HTML字符串，并将编译后的元素添加到当前元素中。

另外，还需要注意的是，作用域不能被隔离。如果指令的作用域被隔离了，ng-click指令可能仍然无效。

以下是一个示例代码，演示了如何使用上述指令来解决ng-click在动态追加元素时失效的问题：

var app = angular.module('my-app', [], function() {})
app.controller('demoCtrl', function() {
  this.clk = '';
  this.click = function() {
    alert('clicked');
  }
})
app.directive('btnClick', ['$compile',
  function($compile) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        element.append($compile(scope.$eval(attrs.actionBtn))(scope));
      }
    }
  }
])

通过将上述代码添加到HTML页面中，可以看到当点击动态追加的按钮时，会弹出一个提示框。这表明ng-click指令已经生效了。

如果你想了解更多关于$scope.$eval和$compile的区别，请参考这个Stack Overflow问题。

0