Вызов функции области angularjs из href

Я использую библиотеку, которая добавляет элемент href в тег. По этой ссылке мне нужно сделать вызов функции angularjs, которая находится в пределах области. Что-то вроде того...

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

Примечание: я прикрепляю этот href через javascript из другой библиотеки (nvd3.js) на самом деле не пишу это, потому что, если бы я был, я мог бы легко использовать ng-click или ng-href.

10
angularjs href javascript nvd3.js

6 ответов

это немного запутанно.

предостережение: это очень, очень хаки и просто абсолютно точно, что вы не предполагается сделать в угловой, но я думаю, вы знаете, что и библиотека делает вашу жизнь трудно...

во-первых, в отличие от onclick, an href не будет интерпретировать строку как javascript. Вместо этого вам придется использовать

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

но это само по себе не поможет, потому что someFunction() - это не метод document, но на контроллере, поэтому нам нужно сначала получить контроллер:

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

здесь myController относится к элементу DOM, который украшен ng-controller, например,

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

если someFunction изменяет состояние представления, Вам также необходимо использовать $scope.apply, то есть

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

обратите внимание, что вам не нужно {{ }} синтаксис, поскольку вы вызываете javascript напрямую, вы не просите angular изменить вашу разметку.

13

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

вот мое решение: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

вы, вероятно, должны использовать ng-click здесь.

8

самое простое решение-это 

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

href= "" важно, иначе стиль наведения курсора не изменится на указатель

2

вам нужно будет использовать $parse () для обработки тега при использовании {{someFn}}.

0

я смешал некоторые вещи здесь, и у меня это работает.

у меня есть меню с некоторыми параметрами, каждый из которых вызывает другой метод на контроллере. 

<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>

метод callFunction в контроллере определяется следующим образом:

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

и меню определяются также в контроллере так: 

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

надеюсь, это кому-то поможет.

0