web-dev-qa-db-fra.com

Appel de la fonction de portée angularjs depuis href

J'utilise une bibliothèque qui ajoute un élément href à une balise. Sur ce lien, je dois faire un appel à une fonction angularjs qui est dans la portée. Quelque chose comme...

<a href="{{someFunction()}}"></a>

Remarque: je joins ce fichier href via javascript à partir d'une autre bibliothèque (nvd3.js), mais je ne l'écris pas car je pouvais facilement utiliser ng-click ou ng-href.

javascriptangularjshrefnvd3.js
10
user1200387

C'est un peu compliqué. 

MISE EN GARDE: C’est très, très hacky et juste absolument exactement ce que vous êtesPASsupposé faire en angulaire, mais je suppose que vous le savez et que la bibliothèque vous rend la vie difficile. ..

Premièrement, contrairement à onclick, une href n'interprétera pas une chaîne en javascript. Au lieu de cela, vous devrez utiliser

<a href="javascript:someFunction()"></a>

Mais cela seul ne le fera pas fonctionner, car someFunction() n'est pas une méthode de la variable document, mais du contrôleur, nous devons donc obtenir le contrôleur en premier:

<a href="javascript:angular.element(
         document.getElementById('myController')).scope().someFunction();"></a>

Où myController fait référence à l'élément DOM qui est décoré avec ng-controller, par exemple.

<div data-ng-controller="SomeController" id="myController"> ... </div>

Si someFunction modifie l'état de la vue, vous devrez également utiliser $scope.apply, c'est-à-dire.

<a href="javascript:angular.element(document.getElementById('myController')).
           scope().$apply(someFunction)"></a>

Notez que vous n'avez pas besoin de la syntaxe {{ }}, car vous appelez directement du javascript, vous ne demandez pas à Angular de modifier votre balisage.

13
mnemosyn

La réponse à cette question ne me convenait donc pas, car elle n’utilise pas vraiment une solution angulaire élégante.

Voici ma solution: http://jsfiddle.net/jjosef/XwZ93

HTML: 

<body class="wrapper" ng-app="ExampleApp">
  <a my-href="buildUrl('one', aVariable, 'three')">This is my a tag with a function that builds the url</a>
</body>

JS:

angular.module('ExampleApp', []);
angular.module('ExampleApp').run(function($rootScope) {
  $rootScope.buildUrl = function() {
    var link = [];
    for(var i = 0; i < arguments.length; i++) {
      link.Push(arguments[i].toLowerCase());
    }
    return '/#!/' + link.join('/');
  };

  $rootScope.aVariable = 'two';
});

angular.module('ExampleApp').directive('myHref', function($parse) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var url = $parse(attrs.myHref)(scope);
      element.attr('href', url);
    }
  }
});
19
John Josef

Vous devriez probablement utiliser ng-click ici.

8
gat

La solution la plus simple est 

<a href="" ng-click="someFunction(x,y,z)">Go</a>

href = "" est important, sinon le style du curseur de survol ne se change pas en pointeur 

2
Tim Freeman

solution: https://embed.plnkr.co/bhMcEO/

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>$window or $location to Redirect URL in AngularJS</title>
      <link rel="stylesheet" href="style.css" />
      <script src="https://code.angularjs.org/1.4.1/angular.js"></script>
      <script>
        var app = angular.module('RedirectURLApp', []);
        app.controller('RedirectURLCtrl', function($scope, $window) {
          $scope.name = 'Anil';
          $scope.RedirectToURL = function() {
            var Host = $window.location.Host;
            var landingUrl = "http://www.google.com";
            alert(landingUrl);
            $window.location.href = landingUrl;
          };
        });
      </script>
    </head>
    <body ng-app="RedirectURLApp">
      <div ng-controller="RedirectURLCtrl">
        <h2>$window or $location to Redirect URL in AngularJS</h2>
        <p>Hello {{name}},</p>
        Click to Redirect <a href="" ng-click="RedirectToURL()">Click Me!</a>
      </div>
      <div><h4><a href="http://www.code-sample.com/2015/06/redirect-to-new-page-using-location-or.html">For more detail..</a></h4></div>
    </body>
    </html>
0
Majid joghataey

J'ai mélangé certaines choses ici et je le fais fonctionner. 

J'ai un menu avec quelques options, chacune appelant une méthode différente sur le contrôleur. 

<span ng-show="hoverOptions" ng-mouseleave="hoverOut()" class="qk-select ui-select-container qk-select--div">
    <ul>
        <li ng-repeat="option in menuOptions"><a href="javascript:void(0);" ng-click="callFunction(option.action)">{{option.name}}</a></li>
    </ul>
</span>

La méthode callFunction dans le contrôleur est définie comme suit: 

$scope.callFunction = function (name){
      if(angular.isFunction($scope[name]))
                $scope[name]();
}

Et les options de menu sont également définies dans le contrôleur: 

$scope.menuOptions = [{action: "uploadPhoto" , name:"Cargar foto"}, {action: "logout", name:"Cerrar sesión"}, {action: "createUser", name:"Nuevo usuario"}];

J'espère que ça aide quelqu'un. 

0
halbano

Vous devrez utiliser $ parse () pour traiter la balise lorsque vous utilisez {{someFn}}.

0
William Lepinski