How to add ng-click of angular for the element created by Jquery?

Question

Someone created custom tag in the project, such as

<mytable config='{head:[title1, title2],data:[[col1, col2]]}'></mytable> ,

the tag above will generate a table after the page is loaded.

I want to create a button in the table, then I insert the string :

'<button class="btn btn-primary" ng-click="lookup(3)">lookup</button>';

but the ng-click doesn't work. I write a simple code to mock it:

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <script type="text/javascript" src="/javascripts/jquery.min.js"></script>
        <script type="text/javascript" src="/javascripts/angular/1.4.0/angular.min.js"></script>
        <script>
            var create = function () {
                $('#template').html('<button ng-click="changeName()">click me</button>')
            }
        </script>
    </head>
    <body ng-controller="myCtrl">
        <span>{{name}}</span>
        <div id="template"></div>
        <button onclick="create()">create</button>

        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.name = "John";
                $scope.changeName = function () {
                    $scope.name = "Jack";
                    alert("success");
                }
            });
        </script>
    </body>
</html>

I have googled and find the angular should compile the newly created element, but I don't know how to in this situation

Suren Srapyan · Accepted Answer · 2016-07-21 12:03:23Z

2

You need the $compile service.

    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $compile) {

        $scope.create = function () {
               $compile($('#template').html('<button ng-click="changeName()">click me</button>'))($scope);
        }
               $scope.name = "John";
               $scope.changeName = function () {
                  $scope.name = "Jack";
                  alert("success");
               }
     });

And change your html to

<button ng-click="create()">create</button>

Or you can get all body and then call $compile to it

var body = $angular.element(document).find('body');
$compile(body)($scope);

answered Jul 21, 2016 at 12:03

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

1 Comment

fudy Over a year ago

As I mentioned, the table only need json format config, maybe after jquery's ready() event that it will create the table, the solution you provided doesn't help

dodopok · Accepted Answer · 2016-07-21 12:02:12Z

0

You should use ng-repeat to create those buttons, not jQuery.

And then angular would automatically bind ng- to this new element.

answered Jul 21, 2016 at 12:02

dodopok

89814 silver badges22 bronze badges

1 Comment

fudy Over a year ago

the tag <mytable> contains other features that I need, there is no need to create those features again, so I can't use ng-repeat to create a new table

Collectives™ on Stack Overflow

How to add ng-click of angular for the element created by Jquery?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related