How to attach an event to a button?

Question

JavaScript

There is a form with a button, here is the input code

<input type="submit" class="btn btn-middle btn-action" value="Отправить" data-ng-click="callback.send()" data-ng-disabled="modalCallbackForm.$invalid" />'

i need to add an event handler for this button for yandex metrics and roistatgoal add code

<input type="submit" class="btn btn-middle btn-action" value="Отправить" onclick="yaCounter40080335.reachGoal('Buy');roistatGoal.reach({name: name, phone: phone, email: email, text: "Заказ из корзины"});return true;"  data-ng-click="callback.send()" data-ng-disabled="modalCallbackForm.$invalid" />'

and stops working, what's the problem? maybe because of the data-ng-click? and did you hang the events correctly?
moreover, the input is formed in some incomprehensible Angular function

; (function (ng) {
    'use strict';

    var callbackService = function ($http, modalService) {
        var service = this;

        service.send = function (name, phone, comment) {

            return $http.post('callback/addcallback', { name: name, phone: phone, comment: comment, rnd: Math.random() }).then(function (response) {
                return response.data;
            });
        };

        service.getParams = function () {

            return $http.get('callback/getparams').then(function (response) {
                return response.data;
            });
        };

        service.dialogRender = function (title, parentScope) {

            var options = {
                'modalClass': 'callback-dialog',
                'isOpen': true
            };

            modalService.renderModal(
                'modalCallback',
                title,
                '<div data-ng-include="\'/modules/callback/scripts/templates/modal.html\'"></div>',
                '<input type="submit" class="btn btn-middle btn-action" value="Отправить" data-ng-click="callback.send()" data-ng-disabled="modalCallbackForm.$invalid" />',
                options,
                { callback: parentScope });
        };

        service.dialogOpen = function () {
            modalService.open('modalCallback');
        };

        service.dialogClose = function () {
            modalService.close('modalCallback');
        };

        service.setVisibleFooter = function (visible) {
            modalService.setVisibleFooter('modalCallback', visible);
        };
    };

    ng.module('callback')
      .service('callbackService', callbackService);

    callbackService.$inject = ['$http', 'modalService'];

})(window.angular);

Answer 1

Of course it won't work.
Transfer the code from the usual onclick to the controller, i.e. wrap it in a function, for example in the same callback.send(). How does the js code in the markup learn about name, phone, email, etc., if you use angular and do not interpolate the code?

Answer 2

Look at this example.
You need to create a controller, as kodwi wrote above. And inject your callbackService into this controller, then wrap the service functions and output them to html. From the example at the link, in the archive function you call one of your callbackService.send() functions