为什么 ng-click 在动态 html 内容中不起作用？答案

【问题标题】：Why ng-click not working in a dynamic html content?为什么 ng-click 在动态 html 内容中不起作用？
【发布时间】：2015-10-04 08:54:20
【问题描述】：

我有一个使用 Angular js 的 Web 应用程序，它可以选择一些主数据。它工作得很好。我唯一的问题是我在表格中创建了一个动态按钮，并且我已将 ng-click 方法附加到该按钮，但是，它不起作用并且它也没有给出任何类型的响应。

ng-click='ssa' 是调用，$scopr.ssa = function(){} 有 alert 方法来获取方法是否被调用

myApp.controller('oppController', ['$scope', function ($scope) {

        $scope.MasterSelection = [{ id: 1, name: 'Contact' }, { id: 2, name: 'Property Category' }, { id: 3, name: 'Property Features' }, { id: 4, name: 'Sale or Rent' }];

        $scope.MasterChange = function () {

            var Type = $scope.master.name;
            var Value = $scope.newtype;

            var Master = new DataAdd(Type, Value);

            $.ajax({
                url: "../api/operations/mastertables",
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    Master: Master
                }),
                success: function (data) {
                    SetDP(data);
                },
                error: function (jqXHR, exception) {
                    alert(exception);

                }
            });
            $scope.experror = "SDsd";
        }

          $scope.ssa = function () { alert('qw');}

    function SetDP(data) {
        var tables = '<table width="60%"><col width="15%"/><col width="20%"/><col width="65%"/><tbody>';

        if (data != null) {
            for (var i = 0; i < data.length; i++) {
                tables += '<tr>';
                tables += '<td> <img style="width:40px; height:40px;" src=@Url.Content("~/Content/Images/btndelete.png") /> </td>';
                tables += '<td> <label style="font-size:x-small; color:white;">' + (i + 1) + '</label> </td>';
                tables += '<td> <label style="font-size:x-small; color:white;">' + data[i][1] + '</label> </td>';
                tables += '</tr>';
            }
        }

        tables += '<tr><td> <button style="width:80px; height:30px; font-size:15px;" ng-click="ssa();"> Add </button> </td><td></td>';
        tables += '<td> <input style="font-size:20px; width:100%;"  type="text" ng-model="newtype" /></td></tr>';
        tables += '</tbody></table>';

        $("#dvtable").html(tables);

    }

        function DataAdd(Type, Value) {
            this.Type = Type;
            this.Value = Value;
        }
    }]);

下面是我的html代码

<select ng-model="master" ng-options="master.name for master in MasterSelection" ng-change="MasterChange()">
      <option value="">None</option>
    </select>
      <div ng-bind-html="dvtable">

      </div>

我应该如何让我的按钮在 Angular js 应用程序中可点击？在此先感谢

【问题讨论】：

你应该使用指令来传递一个templateUrl
你能举个例子吗？
这确实是一种错误的方法，而不是“角度方式”。您永远不应该使用 Angular 以这种方式直接修改 DOM；相反，制作一个模板，将您的“动态”值分配给一个数组，然后使用ng-repeat 为每个值编写模板。几乎不需要混合 JQuery 和 Angular。
正如我每天在关于角度的一个或另一个问题上所说的那样，您应该始终针对您的数据进行编码，而不是针对 DOM 进行编码。
@Claies 你有什么例子吗？

标签： javascript jquery html ajax angularjs

【解决方案1】：

<select ng-model="master" ng-options="master.name for master in MasterSelection" ng-change="MasterChange()">
      <option value="">None</option>
</select>

<my-table>

</my-table>

//js

(function(){

myApp.directive('myTable', function(){

 return {
  restrict : 'E',
  templateUrl : 'my-table.template.html',
  link : function(scope){
    scope.ssa = function(){
      alert("HELLO");
    }
  }

  };

});


})();

//my-table.template.html

<div> <button class="btn btn-default ng-click="ssa()"> Click </button> </div>

【讨论】：