Function on the hyperlink

Asked

Viewed 117 times

2

I am running a function on 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>

Follow ng-click function code:

$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 it is pressed the right mouse click on the menu option, as the href this without any attribution, the same does not open the link that should be opened in the new tab, but if I assign the correct url to href I won’t be able to validate if it’s a normal click on the hyperlink, so I need your help, I thank you from now on!

javascript jquery angularjs link onclick

  • Can someone help me? :(

  • You could post what "check" does and how ng-click is triggered. There is an easy solution, but it requires at least what the verificar() ago.

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,

In the Chrome,

inserir a descrição da imagem aqui

In the Firefox

inserir a descrição da imagem aqui

and in the Internet Explorer

inserir a descrição da imagem aqui

the options offered are not completely equal. If you want to intercept right-click events and the behavior of context menus use an angular module like the Bootstrap UI Context Menu. Functional example to follow:

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>
    <script src="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>

  • Infelizmene Ibotinelly, had already done something pareciso, but my boss requested that you not remove the function of the browser.

1

Note: I know absolutely nothing of Angularjs, never read its documentation. The ng-click seems to offer some specific function to Angular, but I do not know if it is relevant and nothing about it has been 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:

Will not exist HREF, but when someone clicks, right, center or left will be inserted the HREF, then opening in new tab will be redid correctly.

  • I understood Inkeliz, but unfortunately he will not be able to apply href when clicked with the left mouse button, only when right or middle click or when control click more left mouse click, understand? Thanks for helping, buddy

0


I managed to fix it, just assign the command 

ev.preventDefault();

soon after creating the check() function, thanks for your help and for having devoted your time in this Ipino hahah hugs

Browser other questions tagged javascript jquery angularjs link onclick

You are not signed in. Login or sign up in order to post.