从href调用angularjs范围函数

Question

我正在使用一个库，它将href元素附加到标记上。 在这个链接上，我需要调用范围内的angularjs函数。 就像是...

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

注意：我通过javascript从另一个库（nvd3.js）附加此href，实际上没有写入，因为如果我是，我可以轻松地使用ng-click或ng-href。

Answer 1

所以我对这个答案并不满意，因为它并没有真正使用优雅的角度解决方案。

这是我的解决方案： 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);
    }
  }
});

Answer 2

这有点令人费解。

CAVEAT ：这非常，非常hacky，绝对正是你不应该做的角度，但我猜你知道这个和图书馆让你的生活变得艰难......

首先，与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修改标记。

Answer 3

您应该使用ng-click这里。

Answer 4

最简单的解决方案是

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

href =“”很重要，否则悬停光标样式不会更改为指针

Answer 5

使用{{someFn}}时，您需要使用$ parse（）来处理标记。

Answer 6

我在这里混合了一些东西，我有它的工作。

我有一个带有一些选项的菜单，每个选项在控制器上调用不同的方法。

<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"}];

希望它可以帮助某人。

Answer 7

解决方案： 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>

从href调用angularjs范围函数

问题描述

7 个解决方案

解决方案1
19 2014-07-01 13:26:39

解决方案2
14 已采纳 2014-01-08 17:51:13

解决方案3
8 2014-06-09 18:32:23

解决方案4
2 2015-10-06 22:07:00

解决方案5
0 2014-01-08 17:22:35

解决方案6
0 2016-09-22 17:39:17

解决方案7
0 2018-10-08 15:16:05

从href调用angularjs范围函数

问题描述

7 个解决方案

解决方案1 19 2014-07-01 13:26:39

解决方案2 14 已采纳 2014-01-08 17:51:13

解决方案3 8 2014-06-09 18:32:23

解决方案4 2 2015-10-06 22:07:00

解决方案5 0 2014-01-08 17:22:35

解决方案6 0 2016-09-22 17:39:17

解决方案7 0 2018-10-08 15:16:05

解决方案1
19 2014-07-01 13:26:39

解决方案2
14 已采纳 2014-01-08 17:51:13

解决方案3
8 2014-06-09 18:32:23

解决方案4
2 2015-10-06 22:07:00

解决方案5
0 2014-01-08 17:22:35

解决方案6
0 2016-09-22 17:39:17

解决方案7
0 2018-10-08 15:16:05