我正在使用一个将 href 元素附加到标签上的库。在此链接上，我需要调用范围内的 angularjs 函数。比如……
<a href="{{someFunction()}}"></a>
注意：我是通过来自另一个库 (nvd3.js) 的 javascript 附加此 href，但实际上并未将其写入，因为如果我是这样，我可以轻松使用 ng-click 或 ng-href。
【问题讨论】：
标签： javascript angularjs href nvd3.js
所以我对这个答案并不满意，因为它并没有真正利用优雅的角度解决方案。
这是我的解决方案：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);
}
}
});
【讨论】：
scope.$eval 而不是$parse 来避免依赖注入。见modified jsfiddle。
这有点令人费解。
CAVEAT：这非常、非常 hacky，而且绝对是您不应该在 Angular 中做的事情，但我想您知道这一点，并且库是让你的生活变得艰难......
首先，与onclick 不同，href 不会将字符串解释为 javascript。相反，您必须使用
<a href="javascript:someFunction()"></a>
但仅此一项并不能使其工作，因为someFunction()不是document上的方法，而是在控制器上，所以我们需要先获取控制器：
<a href="javascript:angular.element(
document.getElementById('myController')).scope().someFunction();"></a>
其中myController指的是被ng-controller修饰的DOM元素，例如
<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 修改您的标记。
【讨论】：
你应该使用 ng-click here。
【讨论】：
ng-click 的问题是它只会检测点击，而不是当用户使用 Tab 键导航到元素然后按 Space 时检测。换句话说，click 事件不是语义。
最简单的解决方案是
<a href="" ng-click="someFunction(x,y,z)">Go</a>
href="" 很重要，否则悬停光标样式不会变为指针
【讨论】：
ng-click 处理 click DOM 事件，这不是语义：它检测到点击，但它没有检测到用户何时使用 Tab 键导航到元素并且然后按空格键。
我在这里混合了一些东西，我让它工作了。
我有一个带有一些选项的菜单，每个选项在控制器上调用不同的方法。
<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"}];
希望它可以帮助某人。
【讨论】：
在使用 {{someFn}} 时，您需要使用 $parse() 来处理标签。
【讨论】：
解决方案：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>
【讨论】：