Dynamic button ng-click pass variable to function

Question

I want to pass a variable to a function by using the directive ng-click, here is my code:

   var name = "John Doe";
   var $element = $('<button ng-click="open(name)" + "Name:" + '</button>').appendTo('#user-list');

   $compile($element)($scope);

   $scope.open = function(name) {
    alert(name); //Will display 'undefined'
   }

The append works fine and when I'm inserting open(123), I can see an Alert of '123'. But a simple variable like var name will be undefined. Can you please tell me what I'm doing wrong?

Why on Earth do people create a button with jQuery, append it to the DOM with jQuery, then use Angular to click it?? Just use Angular already! — Jeremy Thille
– Jeremy Thille, Commented Dec 26, 2015 at 19:02
@JeremyThille Good point, then show us an example of implementing this with a full AngularJS solution? — Nizar B.
– Nizar B., Commented Dec 26, 2015 at 19:22
Write your button in the view and display it / hide it on condition : in your HTML file, write something like <button ng-click="open(name)" ng-show="someCondition">{{name}}</button>. When you click the button, it will launch $scope.open( $scope.name ). Creating a button and appending it to the DOM is the jQuery way. If you want to develop with Angular, just FORGET JQUERY and do it the Angular way. — Jeremy Thille
– Jeremy Thille, Commented Dec 27, 2015 at 8:12

Kalhan · Accepted Answer · 2015-12-26 18:38:43Z

3

If you use like ng-click="open(name)" then name should be like angular scope variable. but there's no scope variable called name but you have a variable called name That's why you getting undefined alert,and it's not within scope (not a scope variable).

And if you need to alert "John Doe"; which is var name = "John Doe"; then you have to modify it like scope variable as below,

$scope.name = "John Doe";

var $element = $('<button ng-click="open(name)">Name:</button>').appendTo('#ex1');

$compile($element)($scope);

$scope.open = function(name) {
    alert(name); //Will display 'undefined'
}

here is a DEMO

edited Dec 26, 2015 at 18:38

answered Dec 26, 2015 at 18:32

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

4 Comments

Nizar B. Over a year ago

i still get undefined, can you please provide an exemple? I need to display John Doe on the open() function.

Kalhan Over a year ago

Hi I updated with an example, probably the created button is incorrect.

Tony Bao Over a year ago

I have this same solution.

Nizar B. Over a year ago

@K.Toress Thanks it does make sense now and it is working!

user2363986 · Accepted Answer · 2015-12-26 18:43:18Z

0

Looks like you have an extra single quote. Try this:

var $element = $('<button ng-click="open(name)" + "Name:" + </button>').appendTo('#user-list');

answered Dec 26, 2015 at 18:43

user2363986

7575 silver badges4 bronze badges

1 Comment

Tony Bao Over a year ago

there are two issues here, first the <button> tab missing close ">", and second the name should be in scope by $scope.name="Joe Doe"

Collectives™ on Stack Overflow

Dynamic button ng-click pass variable to function

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related