angularjs - Calling parent directive method from child directive through attrs -
this scenario :
<export-team> <ul> <li> <button buy-ticket="{{data}}" buy-callback="onbuyticket()">buy</button> </li> <li> <button buy-ticket="{{data}}" buy-callback="onbuyticket()">buy</button> </li> </ul> </export-team> the buyticket directive
(function() { 'use strict'; angular .module('myapp') .directive('buyticket', buyticket); /** @nginject */ function buyticket($parse, ngdialog, authservice, appconfig, $rootscope, sharetoken, contestsfactory, sharecurrentticket, shareidsession, sharesessionaams, $location) { var vm = this; var directive = { restrict: 'a', link : function(scope, element, attributes) { var buycompatible = attributes['buycompatible']; function addzero(i) { if (i < 10) { = "0" + i; } return i; } var buyticket = function(contest) { var d = new date(); var y = d.getfullyear(); var m = addzero(d.getmonth()+1); var day = addzero(d.getdate()); var h = addzero(d.gethours()); var min = addzero(d.getminutes()); var s = addzero(d.getseconds()); var date = ''+y+m+day+h+min+s+''; var transactionid = $rootscope.transactionid; var currenttoken = sharetoken.get(); var data = { idsessione:currenttoken, // ->token useragent:navigator.useragent, sessioneaams:contest.aams_session_id, gameid:appconfig.game_id, transactionid:transactionid, datetime:date, buyin:contest.buy_in } var dialogloading = ngdialog.open({ closebydocument : false, closebyescape : false, showclose : false, id : 'ft-modal-loading', controller: ['$scope', function($scope){ $scope.bodyurl = 'app/components/modals/body/loading.html'; $scope.title = 'acquisto ticket'; $scope.error = 'il sistema sta procedendo all\'acquisto del ticket'; }] }); contestsfactory.buyticket(data).success(function(response){ dialogloading.close(); if (response.esito == "0") { if (!buycompatible) { sharecurrentticket.set(response.ticketsogei); sharesessionaams.set(contest.aams_session_id); shareidsession.set(contest.id_session); $location.path('my-contests/'+contest.id_contest+'/'+contest.contest_status); } } else { var message = response.descrizione; var ids = ngdialog.getopendialogs(); var dialogerror = ngdialog.open({ id : "ft-modal-error-2", controller: ['$scope', function($scope){ $scope.bodyurl = 'app/components/modals/body/error.html'; $scope.title = 'errore'; $scope.error = message; }] }); } }) .error(function(){ var dialogerrornotendled = ngdialog.close('ft-modal-loading'); ngdialog.open({ id : 'ft-modal-error', controller: ['$scope', function($scope){ $scope.bodyurl = 'app/components/modals/body/error.html'; $scope.title = 'errore'; $scope.error = 'il servizio non รจ attualmente disponibile'; }] }); }) } var openconfirmbuyticket = function(contest) { contest = json.parse(contest); if (ngdialog.isopen('ft-modal-contest-detail')) { ngdialog.close('ft-modal-contest-detail'); }; if (!authservice.islogged()) { ngdialog.open({ controller: ['$scope', function($scope){ $scope.bodyurl = 'app/components/modals/body/not_logged.html'; $scope.title = 'spiacenti'; $scope.error = 'devi essere loggato per poter partecipare ad un contest'; }] }); } else { ngdialog.openconfirm({ controller: ['$scope', function($scope){ $scope.title = 'conferma'; $scope.bodyurl = 'app/components/modals/body/confirm_buy.html'; $scope.contest_name = contest.name_contest; $scope.buy_in = contest.buy_in; $scope.currency = appconfig.currency_symbol; }], }).then(function (confirm) { buyticket(contest); }, function(reject) { }); } } element.on('click', function(e){ var contest = attributes['buyticket']; openconfirmbuyticket(contest); }) } }; return directive; } })(); the export directive
(function() { 'use strict'; angular .module('myapp') .directive('exportteam', exportteam); /** @nginject */ function exportteam(contestsfactory, ngdialog, appconfig, formatdatefactory) { var vm = this; var directive = { restrict: 'ae', transclude: true, controller : function($scope) { $scope.test = function() { alert('hey'); } }, link : function(scope, element, attributes) { element.on('click', function(e){ var ticket = attributes['exportteam']; var id_session = attributes['idsession']; scope.openexportteamdialog(ticket, id_session, false); }) scope.openexportteamdialog = function(ticket, aams_session_id, aftersave) { ngdialog.open({ id : 'ft-modal-exportteam-detail', classname : 'ngdialog ngdialog-theme-default ft-dialog-exportteam', controller: ['$scope', 'contestsfactory', 'appconfig', function($scope, contestsfactory, appconfig){ $scope.title = "aggiungi contest compatibili"; $scope.bodyurl = 'app/components/modals/body/exportteam.html'; $scope.contentloading = true; $scope.currency = appconfig.currency_symbol; $scope.aftersave = aftersave; $scope.compatiblecontests = []; contestsfactory.getcompatiblecontests(ticket).then(function(response){ angular.foreach(response.data[0], function(item, i){ var multientryoptions = []; if(item.multientry > 1) { item.ismultientry = false; var n = parseint(item.multientry); (i = 1; <= n; i++) { multientryoptions.push({ text : i+" team", value : }) } item.multientryoptions = multientryoptions; item.multientryoptionselected = multientryoptions[0]; }else{ item.ismultientry = true; }; }) $scope.compatiblecontests = response.data[0]; $scope.contentloading = false; }) }] }); } scope.openexportteamdialog('n3e94100a725f9qg', 'm3e921013c6dcfct', false); } }; return directive; } })(); the buy-ticket directive makes http call, on response want able call onbuyticket method of <export> directive.
i'm trying understand best way that.
thanks everyone
this sample show how can call function directive
in sample can see insert data in our directive, , handle data , other action in directive.
var app = angular.module("app", []); app.controller("ctrl", function ($scope) { $scope.datafromyourcontroller = [ { name: "concert jennifer", value: 200 }, { name: "007", value: 100 } ]; }) .directive("export", function () { var template = "<div>" + "<ul>" + "<li ng-repeat=\"array in arrays\">" + "<button ng-click=\"onbuyticket()\">buy ticket {{array.name}}</button><hr>" + "</li>" + "</ul>" + "</div>"; return { restrict: "e", template: template, scope: { data: "=" }, link: function (scope, elem, attrs, ngmodel) { scope.arrays = scope.data; scope.onbuyticket = function () { alert("calling function directive"); } } }; })<!doctype html> <html ng-app="app" ng-controller="ctrl"> <head> </head> <body> <h1>call action directive</h1> <export data="datafromyourcontroller"></export> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </body> </html>
Comments
Post a Comment