web-dev-qa-db-ja.com

hrefからangularjsスコープ関数を呼び出す

タグにhref要素を追加するライブラリを使用しています。このリンクでは、スコープ内にあるangularjs関数を呼び出す必要があります。何かのようなもの...

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

注：別のライブラリ（nvd3.js）のjavascriptを介してこのhrefをアタッチしていますが、実際にはこれを記述していません。これは、ng-clickまたはng-hrefを簡単に使用できるためです。

javascriptangularjshrefnvd3.js
10
user1200387

それは少し複雑です。

[〜＃〜]警告[〜＃〜]：これは非常に非常にハッキーであり、あなたが何をしているのかまったく正確です[〜＃〜]ない[〜＃〜] =アンギュラーで行うことになっていますが、あなたはそれを知っていると思います、そしてライブラリはあなたの人生を困難にしています...

まず、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にマークアップの変更を求めることはありません。

14
mnemosyn

したがって、エレガントなangularソリューションを実際に利用していないため、これに対する答えには満足していませんでした。

これが私の解決策です： http://jsfiddle.net/jjosef/XwZ9

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

おそらくここでng-clickを使用してください。

8
gat

最も簡単な解決策は

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

href = ""は重要です。それ以外の場合、ホバーカーソルのスタイルはポインターに変わりません。

2
Tim Freeman

解決策： 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>
0
Majid joghataey

ここでいくつかのことを混合し、それを機能させています。

私はいくつかのオプションを含むメニューを持っています。それぞれがコントローラーの異なるメソッドを呼び出します。

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

{{someFn}}を使用する場合、タグを処理するには$ parse（）を使用する必要があります。

0
William Lepinski