Function in hyperlink

Question

Function in hyperlink

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

2

I'm running a function in the hyperlinks of my system, as shown in the code below:

<md-menu-item ng-repeat="insumo in insumos">
    <a href ng-click="verificar('mostrarInsumos', insumo.ins_cl_id, '1', $event)">
        <md-button>{{insumo.ins_cl_nome}}</md-button>
    </a>
</md-menu-item>

Here is the code for the ng-click function:

$scope.verificar = function (ir_para, codigo, x, ev) {
    console.log("caraca mano");
    var retorno = false;
    var local = $location.url();
    console.log(local + " " + retorno);


    var subLocal = local.replace(/^\/+mostrarInsumos+\/+[0-9]{0,9}/, 'mostrarinsumos');
    console.log(subLocal);

    if (local === '/estabelecimento') {
        retorno = factoryBairro.get('estabelecimentoCtrl').verificaAlterado();
    } else if (subLocal === 'mostrarinsumos') {
        retorno = factoryBairro.get('mostrarInsumoCtrl').verificaAlterado();
        console.log(retorno);
    } else {
        retorno = false;
    }

    if (retorno === false) {
        if (x === '0') {
            $location.path(ir_para);
        } else if (x === '1') {
            factoryBairro.get('principalCtrl').sampleAction(ir_para, codigo, ev);
        }
    } else if (retorno === true) {
        var confirm = $mdDialog.confirm()
                .title('Existem dados que foram modificados, se prosseguir perderá o que foi alterado. Deseja continuar?')
                .ariaLabel('Dados Modificados')
                .targetEvent(ev)
                .ok('Sim')
                .cancel('Não');
        $mdDialog.show(confirm).then(function () {
            if (x === '0') {
                $location.path(ir_para);
            } else if (x === '1') {
                factoryBairro.get('principalCtrl').sampleAction(ir_para, codigo, ev);
            }
        });
    } else {
        alert("parece que este location não foi configurado no DashboardCtrl");
    }

};

But the problem occurs when you right-click on the menu option, because href has no assignment, it does not open the link that should be opened in the new but if I assign the correct url to href I will not be able to validate if it is a normal click on the hyperlink, so I need your help, thank you in advance!

javascript jquery angularjs onclick link

asked by anonymous 15.02.2016 / 18:59

3 answers

2

ng-click causes Angular to intercept the click event by changing the default behavior. This is true for any hook via javascript.

However, even the default behavior changes from browser to browser. For example,

Chrome ,

NoFirefox

andInternetExplorer

Theoptionsofferedarenotcompletelythesame.Ifyouwanttointerceptright-clickeventsandthebehaviorofcontextmenususeananglemodulelikethe Bootstrap UI Context Menu . Functional example below:

var app = angular.module('sampleApp', ['ui.bootstrap.contextMenu']);

app.controller('SampleController', function ($scope) {

  $scope.items = [
    { name: 'Small Health Potion', cost: 4 },
    { name: 'Small Mana Potion', cost: 5 },
    { name: 'Iron Short Sword', cost: 12 }
  ];

  $scope.menuOptions = [
    ['Buy', function ($itemScope) {
      $scope.player.gold -= $itemScope.item.cost;
    }],
    null,
    ['Sell', function ($itemScope) {
      $scope.player.gold += $itemScope.item.cost;
    }, function ($itemScope) {
      return $itemScope.item.name.match(/Iron/) == null;
    }],
    null,
    ['More...', [
      ['Alert Cost', function ($itemScope) {
        alert($itemScope.item.cost);
      }],
      ['Alert Player Gold', function ($itemScope) {
        alert($scope.player.gold);
      }]
    ]]
  ];
  $scope.otherMenuOptions = [
    ['Favorite Color', function ($itemScope, $event, color) {
      alert(color);
    }]
  ]
});

<html ng-app='sampleApp'>
  
  
  <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">    
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><scriptsrc="https://rawgit.com/Templarian/ui.bootstrap.contextMenu/master/contextMenu.js"></script>
  </head>
  <body>
    <div ng-controller="SampleController">

      <div class="list-group">
        <a href="#"
           ng-repeat="item in items"
           context-menu="menuOptions">
          <span class="badge">{{item.cost}}</span>
          {{item.name}}
        </a>
      </div>      


    </div>
  </body>
</html>

15.02.2016 / 21:21

1

Note: I do not know anything about AngularJS, I've never read your documentation. The ng-click seems to offer some specific function to the Angular, but I do not know if it is relevant and nothing about it was mentioned.

A practical solution:

    function verificar(e, elemento) {

      if(e === 2 || e === 3){
      // Se for clique do mouse do meio ou direito:
      
      elemento.href = 'https://google.com';

      // Somente para visualização:
      document.getElementsByTagName("ver")[0].innerHTML = 'Link atual: '+elemento.href;
     }else{
     // Se não...

     alert('Mouse esquerdo');
     }



    }

<a href="" onmousedown="verificar(event.which, this)">
  <md-button>Clique em mim!</md-button>
</a>
<br><br>
<ver></ver>

The idea is simple:

There will not be HREF , but when someone clicks, right click, central or left will be inserted HREF , then if it opens in new tab it will be redone correctly.

15.02.2016 / 20:33

Menu with CSS3 and Javascript How to load a URL that is inside a .txt by Web View?

score 0 · Accepted Answer

0

I was able to fix it, just assign the command

ev.preventDefault();

Soon after creating the check () function, thanks for your help and for having dedicated your time in this pipino hahah hugs

16.02.2016 / 13:20