从href调用angularjs范围函数

use*_*387 10 javascript href angularjs nvd3.js

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

<a href="{{someFunction()}}"></a>
Run Code Online (Sandbox Code Playgroud)

注意:我通过javascript从另一个库(nvd3.js)附加这个href实际上并没有写这个,因为如果我是,我可以轻松地使用ng-click或ng-href.

小智 19

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

这是我的解决方案: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>
Run Code Online (Sandbox Code Playgroud)

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);
    }
  }
});
Run Code Online (Sandbox Code Playgroud)

  • 这应该是最好的答案:/ (2认同)

mne*_*syn 14

这有点令人费解.

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

首先,不像onclick,href不会将字符串解释为javascript.相反,你必须使用

<a href="javascript:someFunction()"></a>
Run Code Online (Sandbox Code Playgroud)

但仅此一点不会使它工作,因为someFunction()它不是一个方法document,而是在控制器上,所以我们需要先得到控制器:

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

Where myController指的是用ng-controller例如装饰的DOM元素

<div data-ng-controller="SomeController" id="myController"> ... </div>
Run Code Online (Sandbox Code Playgroud)

如果someFunction修改了视图的状态,你还需要使用$scope.apply,即

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

请注意,您不需要{{ }}语法,因为您直接调用javascript,而不是要求angular修改标记.

  • 我见过的最漂亮的黑客.奇迹般有效! (3认同)

gat*_*gat 8

您应该使用ng-click这里.