ng-click 不适用于新添加的元素答案

【问题标题】：ng-click not working on newly appended elementsng-click 不适用于新添加的元素
【发布时间】：2015-09-01 04:44:05
【问题描述】：

为什么我的 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));

【问题讨论】：

这可能会有所帮助stackoverflow.com/questions/16296264/…
@mukesh：我试过这个 element.append($compile(scope.actionBtn)(scope));但不工作
plnkr.co/edit/cbGDbFSXcJQ56rdK7gDN?p=preview
element.append($compile(scope.actionBtn)(scope)); 无法工作，因为指令的范围是孤立的
jsfiddle.net/arunpjohny/bkzrvfLm/2

标签： javascript angularjs angularjs-ng-click

【解决方案1】：

您需要 compile 手动创建一个新的 dom 元素，以便 angularjs 对其进行处理

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>

【讨论】：

同样范围也不能被隔离。
@JoaoLeal：如何在定义的隔离范围内使用它？我有另一个点击功能正在彻底隔离范围内发生
@JoaoLeal：谢谢你的回复。你能解释一下这部分是做什么的'&onClick'
这个问题（和答案）应该可以帮助你stackoverflow.com/questions/14908133/…