如何使href工作与函数结果在ng-click

How to make href work with the function result in ng-click?

本文关键字：结果 ng-click 函数 何使 href 工作      更新时间：2023-09-26

如何将ng-click函数结果传递到href标签中?例如，如果我有

<a href = "{{value}}" target = "_blank" ng-click="myFunction()">Click Here</a>

其中myFunction()返回一个唯一的链接从我的服务器每次我点击它，我希望它被传递到href标签作为value，然后在没有任何弹出窗口的新选项卡中打开此链接。

我不确定如何使href与ng-click中的功能同时在同一标签中工作。我已经尝试了$window.open()生成弹出窗口，所以我正在寻找一个替代的解决方案。

我注意到使用href和target="_blank"在新选项卡中打开链接而不会引起弹出窗口，但我需要href在ng-click中使用myFunction()的返回值的方法。

你可以这样做，它会在一个新的选项卡中打开

controller('exampleCtrl', ['$scope', '$window',
    function($scope, $window) {
        $scope.myFunction = function(link){
            $window.open(link, '_blank');
        };
    }
]);

你可以像这样直接绑定url 

<a ng-href="{{myFunction()}}" target="_blank" >Click Here</a>

使用

<a ng-href="{{myFunction()}}" target="_blank">Click Here</a>

它将调用该方法并在新窗口中打开URL

试试这个就行了

Html: 

<div ng-controller="MyCtrl">
<a ng-click="openLink('http://www.example.com')">Open Link in a new Tab</a>
</div>

JS: 

myApp.controller('MyCtrl', ['$scope', '$window',function($scope, $window) {
        $scope.openLink = function(link) {
            $window.open(link, '_blank');
        };
    }
]);

在这里，$window.open将与href在目标空白中工作相同。

工作小提琴:http://jsfiddle.net/rohitjindal/vn0dpst0/

使用ng-click调用函数以使用$window在新选项卡中打开链接。查看工作小提琴。

控制器: 

// App declaration
var MyApp = angular.module("MyApp", []);
// App controller
MyApp.controller("TestController", ["$scope", "$window", function($scope, $window) {
    var sampleLinks = [
    "http://www.google.com",
    "http://www.facebook.com",
    "http://www.twitter.com",
    "http://www.instagram.com",
    "http://www.gmail.com"
  ]
  $scope.myFunction = function() {
    var randomIndex = Math.floor(Math.random()*sampleLinks.length);
    $window.open(sampleLinks[randomIndex], '_blank');
  };
}]);

模板:

<div ng-app="MyApp" ng-controller="TestController">
  <a href="" ng-click="myFunction();">Click here</a> to open random link in a new tab!
</div>
相关文章：