How to get text of a button on 'ng-click' event in AngularJS component

Question

I have created a component in AngularJS for reusable buttons. I need to pass button text into a function argument via ng-click event of the same button. However, I am unable to get the button text in a function call.

Any help would be much appreciated.

Below is my code.

Index.html

<div class="object-actions" ng-repeat="val in value">
   <button-control  ng-repeat="v in val" name="{{v}}"></button-control>
</div>

Component

(function() {
  "use strict";
  angular
    .module("buttonCtrl", [])
    .component("buttonControl", {
      template: `<button ng-click="getName('$ctrl.name')">{{$ctrl.name}}</button>`,
      controller: buttonCtrl,
      bindings: {
        name: "@"
      }
    });

  buttonCtrl.$inject = ["$scope"];

  function buttonCtrl($scope) {
    $scope.getName = function(name) {
      alert(name);
    };
  }
})();

Output enter image description here

georgeawg · Accepted Answer · 2020-02-28 16:26:59Z

1

The problem is that you pass the variable with quotes and it becomes a string.

ERRONEOUS

ng-click="getName('$ctrl.name')"

However you don't need to pass it into the function in order to print it, and also there is no need to inject $scope:

function buttonCtrl() {
    var ctrl = this;

    ctrl.getName = function() {
      alert(ctrl.name);
    };
}

BETTER

ng-click="$ctrl.getName()"

edited Feb 28, 2020 at 16:26

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Feb 27, 2020 at 10:16

Bill P

3,61610 gold badges24 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

How to get text of a button on 'ng-click' event in AngularJS component

1 Answer 1

ERRONEOUS

BETTER

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

ERRONEOUS

BETTER

Comments

Your Answer

Sign up or log in

Post as a guest

Related