استدعاء وظيفة نطاق angularjs من href
-
20-12-2019 - |
سؤال
أنا أستخدم مكتبة تُلحق عنصر href بالعلامة.أحتاج على هذا الرابط إلى إجراء اتصال بوظيفة angularjs الموجودة ضمن النطاق.شيء مثل...
<a href="{{someFunction()}}"></a>
ملحوظة:أقوم بإرفاق هذا href عبر جافا سكريبت من مكتبة أخرى (nvd3.js) ولا أكتب هذا فعليًا لأنه إذا كنت كذلك، فيمكنني بسهولة استخدام ng-click أو ng-href.
المحلول
هذا معقد بعض الشيء.
تنبيه قضائي:هذا أمر مبتكر للغاية وهو تمامًا ما أنت عليه لا من المفترض أن تفعل ذلك بالزاوية، ولكن أعتقد أنك تعرف ذلك والمكتبة تجعل حياتك صعبة...
أولا، على عكس onclick
, ، ان href
لن تفسر سلسلة على أنها جافا سكريبت.بدلا من ذلك، عليك أن تستخدم
<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>
لاحظ أنك لا تحتاج إلى {{ }}
بناء الجملة، لأنك تتصل بجافا سكريبت مباشرة، فأنت لا تطلب من angular تعديل الترميز الخاص بك.
نصائح أخرى
So I was not pleased with the answer to this as it doesn't really utilize an elegant angular solution.
Here's my solution: 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);
}
}
});
You should probably use ng-click here.
The simplest solution is
<a href="" ng-click="someFunction(x,y,z)">Go</a>
href="" is important, otherwise hover cursor style does not change to a pointer
You'll need to use $parse() to process the tag when using {{someFn}}.
I mixed some things here and I have it working.
I have a menu with some options, each one calls a different method on the controller.
<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>
The callFunction method in the controller is defined like that:
$scope.callFunction = function (name){
if(angular.isFunction($scope[name]))
$scope[name]();
}
And the menu options are defined also in the controller in that way:
$scope.menuOptions = [{action: "uploadPhoto" , name:"Cargar foto"}, {action: "logout", name:"Cerrar sesión"}, {action: "createUser", name:"Nuevo usuario"}];
Hope it helps someone.
solution: 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>