Why ng-click not working in a dynamic html content?

Question

I have a web application working with angular js and it has selection to select some master data. It is working perfectly fine. My only problem is I create a dynamic button inside a table and I have attached ng-click method to that button, however, it is not working and it does not give any kind of a respone either.

ng-click='ssa' is the call and $scopr.ssa = function(){} has alert method to get a the method is called or not

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;" [email protected]("~/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;
        }
    }]);

Following would be my html code

<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>

How should I make my button clickable in angular js application? Thanks in advance

this is really a wrong approach, and not "the angular way". You should never be modifying the DOM directly in this way using angular; instead, make a template, assign your "dynamic" values to an array, and use ng-repeat to write the template for each value. Mixing JQuery and angular is almost never necessary. — Claies
– Claies, Commented Jul 15, 2015 at 12:58
As I say EVERY day on one question or another about angular, you should always be coding against your data, never coding against the DOM. — Claies
– Claies, Commented Jul 15, 2015 at 12:59

gr3g · Accepted Answer · 2015-07-15 11:32:22Z

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>

answered Jul 15, 2015 at 11:32

gr3g

2,9145 gold badges31 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why ng-click not working in a dynamic html content?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related