Как навесить событие на кнопку?

Question

[viktorulyushev]

Есть форма с кнопкой,вот код инпута

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

мне нужно повесть обработчик события для этой кнопки для яндекс метрики и roistatGoal добавляю код

<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" />'

и перестает работать,в чем проблема?может из за data-ng-click?и правильно ли навесил события?
причем инпут формируется в какой то непонятно ангуляровской функции

; (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);

Comments

[viktorulyushev]

Ну неужели ни у кого даже предположений нет?

[DevMan]

viktorulyushev: какое отношение имеет php к вопросу?

[viktorulyushev]

Немного уточню,при нажатии кнопки открывается всплывающая форма с кнопкой на которую я вешаю событие,если я это событие добавляю то форма перестает открываться,почему?

Answer 1

[kodwi]

Конечно работать не будет.

Код из обычного onclick перенеси в контроллер, т.е. оберни в функцию, например в тот же callback.send(). Откуда js код в разметке узнает про name, phone, email и т.д., если ты используешь ангуляр и при этом не интерполируешь код?

Comments

[viktorulyushev]

я не разбираюсь в ангуляре,мне просто сказали навесь на эту кнопку событие,можете привести пример кода?

[kodwi]

ну, так сразу и не объяснишь. Можешь показать код функции, которая содержит примерно такие строчки:

ng.module(...).controller(...) {....}

?

[viktorulyushev]

ну вот весь код файла,там есть что то типо этого,вот в самом низу формируется мой input

; (function (ng) {

    'use strict';

    ng.module('callback', []);
})(window.angular);

; (function (ng) {

    'use strict';

    var CallbackCtrl = function ($sce, callbackService) {

        var ctrl = this, isRender = false;

        ctrl.currentForm = "main";

        ctrl.send = function () {
            callbackService.send(ctrl.name, ctrl.phone, ctrl.comment).then(function (result) {
                if (result == true) {
                    ctrl.currentForm = "final";
                    callbackService.setVisibleFooter(false);

                    $(document).trigger("module_callback");
                }
            });
        }

        ctrl.dialogOpen = function () {

            if (ctrl.currentForm == "final") {
                ctrl.currentForm = "main";
                ctrl.name = "";
                ctrl.phone = "";
                ctrl.comment = "";
                callbackService.setVisibleFooter(true);
            }

            if (isRender) {
                callbackService.dialogOpen();
            } else {
                callbackService.getParams().then(function (result) {                    
                    ctrl.modalText = $sce.trustAsHtml(result.ModalText);
                    ctrl.showCommentField = result.ShowCommentField;
                    callbackService.dialogRender(result.Title, ctrl);
                });
            }
            isRender = true;
        }
    };

    ng.module('callback')
      .controller('CallbackCtrl', CallbackCtrl);

    CallbackCtrl.$inject = ['$sce', 'callbackService'];

})(window.angular);

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

    ng.module('callback')
      .directive('callbackStart', ['$compile', function ($compile) {
          return {
              restrict: 'A',
              link: function (scope, element, attrs, ctrl) {
                  var callbacks = document.querySelectorAll('[data-callback]');
                  $compile(callbacks)(scope);
              }
          };
      }]);

    ng.module('callback')
      .directive('callback', function () {
          return {
              restrict: 'A',
              scope: true,
              controller: 'CallbackCtrl',
              controllerAs: 'callback',
              bindToController: true,
              link: function (scope, element, attrs, ctrl) {
                  element.on('click', function (event) {
                      event.preventDefault();
                      ctrl.dialogOpen();
                      scope.$apply();
                  });
              }
          };
      });
})(window.angular);

; (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);

[viktorulyushev]

kodwi: кстати,заметил что появляется такая ошибка callback.js:123 Uncaught SyntaxError: missing ) after argument list если вставляю свой код

Answer 2

[DarthJS]

Посмотри на этот пример
Тебе нужно создать контроллер, как написал выше kodwi. И в этот контроллер инджектишь свой callbackService, далее обворачиваешь функции сервиса и выводишь их в хтмл. Из примера по ссылке, в функции archive ты вызываешься какую-то из своих функций callbackService.send()

Comments

[viktorulyushev]

вы не дописали что то?какой пример?

[DarthJS]

viktorulyushev: да, пардон: jsfiddle.net/dakra/U3pVM

[viktorulyushev]

крч,сделал так,добавил для инпута класс новый и для класса прописал код js

$(document).ready(function(){
		$(document).on('click', ".send_yandex", function () {
			yaCounter40080335.reachGoal('Zvonok');
			console.log("zvonok");
		});
	});

вроде работает,это нормально я сделал?

[DarthJS]

viktorulyushev: нууу, у тебя приложение на ангуляре или просто jquery?
если ангулар, то не очень норм, если работает и пофиг, то ок :)
Если ты создал контроллер, то :
'твой Контроллер'.$inject = ['$scope,' 'callbackService'];

$scope.sendData = function () {
callbackService.send().then(function (response) {
});
}

в темлейте SEND

зачем у тебя ивенты на инпутах?

[viktorulyushev]

DarthJS: крч,есть магазин на cms advantshop ,вот там есть высплывашка,ну и этот магазин частично сделан на angular вот

[viktorulyushev]

DarthJS: а на инпут мне нужно повесить яндекс метрику чтобы отслеживать статистику