ng 单击不起作用新附加的元素

ng-click not working on newly appended elements

本文关键字：元素 新附加 不起作用 单击 ng      更新时间：2023-09-26

为什么我的ng-click在附加按钮时不起作用？当我最初加载按钮时，相同的 ng-click 正在工作。

app.controller('demoCtrl', function() {

          this.clk = '<button ng-click="dctrl.click()">Button</button>';
          this.click = function() {
            alert('clicked');
          }
})
 app.directive('btnClick', function() {
          return {
            restrict: 'A',
            scope: {
              actionBtn: '='
            },
            link: function(scope, element, attrs) {
              element.append(scope.actionBtn);
            }
          }
})

.HTML

<body ng-controller="demoCtrl as dctrl">
        <div btn-click action-btn="dctrl.clk"></div>
</body>

http://plnkr.co/edit/QPKXfGd9s7HzLvEfKvbG?p=preview

更新

我也尝试过这种方式，但没有运气

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

您需要编译一个手动为angularjs创建的新dom元素才能对其进行处理

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


var app = angular.module('my-app', [], function() {})
app.controller('demoCtrl', function() {
  this.clk = '<button ng-click="dctrl.click()">Button</button>';
  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));
      }
    }
  }
])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="demoCtrl as dctrl">
  <div action-btn="dctrl.clk" btn-click></div>
</div>

相关文章：