How to add an element with a click event to an angular scope at runtime

Question

So far I've the following function called onGroundUserClick on the Scope passedScope.

I want to set it up so a function running when the iframe is loaded will set up ng-click.

var $tdName = $("<td/>", {
                    "class": "name",
                    "ng-click": "passedScope.onGroupUserClick(this)",
                });

When I open the developer console in Chrome I see the ng-click attribute was indeed added to the button but it does not fire up the event.

a class="link" ng-click="passedScope.onGroupUserClick(this)" href="">Account Manager a

Any advice will be greatly appreciated.. I'm kind of stuck here.

Because you never compiled new node, so Angular has no idea about ng-click. — dfsq
– dfsq, Commented May 24, 2016 at 14:45

Glenn Ferrie · Accepted Answer · 2016-05-24 18:08:51Z

1

After you have added the element to the DOM, call $scope.$digest(); to prime the model and the UI to "sync up". You can find a more thorough explanation here:

$scope.$digest(); documentation

answered May 24, 2016 at 18:08

Glenn Ferrie

10.4k3 gold badges46 silver badges77 bronze badges

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

Comments

Ravinder Singh Rawat · Accepted Answer · 2016-05-24 15:04:52Z

0

You can create view in <td> from loop like variable $tds and pass your logic in ng-click which will work. You have to change the loop variable $tds value dynamically.

Like:

<td ng-repeat="td in tds"> <a ng-click="your_fun()">{{td.val}}</a> </td>

answered May 24, 2016 at 15:04

Ravinder Singh Rawat

698 bronze badges

Comments

Thanh Binh · Accepted Answer · 2016-05-24 18:03:03Z

0

Do you want to look like this:

var app = angular.module('myApp', []);
app.directive('custom', function ($compile) {
  return{
        restrict:'A',
        link: function (scope, ele, attrs) {
      scope.$watch(attrs.custom, function(html) {
        ele.html(html);
        $compile(ele.contents())(scope);
      });
    }
    
 };
});
app.controller('myCtrl', function($scope) {
$scope.html = '<button ng-click="doSomething()">Click me</button>';
$scope.doSomething = function(){
      alert('click');
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" >
<div custom="html"></div>
</div>

answered May 24, 2016 at 18:03

Thanh Binh

404 bronze badges

Collectives™ on Stack Overflow

How to add an element with a click event to an angular scope at runtime

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related