Я использую библиотеку, которая добавляет элемент href в тег. По этой ссылке мне нужно сделать вызов функции angularjs, которая находится в пределах области действия. Что-то вроде...
<a href="{{someFunction()}}"></a>
Примечание. Я прикрепляю этот href через javascript из другой библиотеки (nvd3.js), на самом деле не записывая это, потому что, если бы я был, я мог бы легко использовать ng-click или ng-href.
Это немного запутанно.
CAVEAT. Это очень, очень взломанно и абсолютно точно, что вы НЕ должны делать в angular, но я думаю, вы знаете, что и библиотека делает вашу жизнь тяжелой...
Во-первых, в отличие от onclick, 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 изменить свою разметку.
Таким образом, я не был доволен ответом на это, поскольку он действительно не использует элегантное решение angular.
Здесь мое решение: 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);
}
}
});
Вы должны, вероятно, использовать ng-click здесь.
Простейшим решением является
<a href="" ng-click="someFunction(x,y,z)">Go</a>
href="" важно, иначе стиль курсора не изменится на указатель
Вам нужно будет использовать $parse() для обработки тега при использовании {{someFn}}.
Я кое-что использовал здесь, и у меня есть работа.
У меня есть меню с некоторыми опциями, каждый из которых вызывает на контроллере другой метод.
<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"}];
Надеюсь, это поможет кому-то.