javascript - 在 AngularJS ng-click 内部检查 URL.$valid(如果是的话)。如何?
问题描述
我正在一个有角度的应用程序中创建一个 URL 列表,大多数 URL 都导致......但是少数几个有 URL,例如. 我不想在每个对象中指定 URL……我只想验证 URL,然后使用或根据有效内容打开网站。https://
example.io
https://
example.io
http://
https://
我正在使用 ng-click 并将其绑定到一个打开的窗口,该窗口带有嵌套的图像。
索引.html
<head>
<script src="js/shared/angular.min.js"></script>
<link rel="stylesheet" href="css/row.css">
</head>
<body ng-app="MainApp">
<div ng-controller="Main" ng-cloak>
<div id="RowDiv">
<button style="visibility: hidden; width: 25px;"></button>
<a ng-repeat="r1 in r1s" ng-click="openurl(r1.url.$valid==true?r1.url:'https://' + r1.name + '.io')" ng-cloak>
<img ng-src="img/{{r1.name}}.png" height="40px">
</a>
<button style="visibility: hidden; width: 25px;"></button>
</div>
</div>
<button id="LftBtn" style="z-index: 1000;" >
<i id="L-Arrow"></i>
</button>
<button id="RgtBtn" style="z-index: 1000;" >
<i id="R-Arrow"></i>
</button>
<script src="js/protractor.js"></script>
<script src="js/row.js"></script>
</body>
量角器.js
var app = angular.module("MainApp", []);
// - - app controllers - - \\
app.controller('Main', ['$scope', function($scope) {
$scope.r1s = [
{name: 'Surviv', url: 'https://google.com'},
//Just a test, urls will be changed later
{name: 'Zombsroyale'},
{name: 'Bruh'},
{name: 'Krunker'},
{name: 'Shellshock'},
{name: 'Diep'},
{name: 'Tanked'},
{name: 'Gats'},
{name: 'Warbot'},
{name: 'Counterstroke'}
];
$scope.openurl = function(url){
if(window.parent == window.top) {
//If outside
window.open(url, "_blank"});
} else {
//If inside
window.open(url, '_parent');
}
};
}]);
这里的主要内容是url
验证,以及ng-click="openurl(r1.url.$valid == true ? 'http://' + r1.name '.io' : 'https://' + r1.name + '.io')"
我不知道为什么这不起作用,它会打开弹出窗口,但它会完全忽略三元和 $valid 参数......
我试过交换
- .$valid==true
w/
-.$valid==false
但我得到了相同的结果!为什么这不起作用?
plunkr、jsfiddle 或 codepen 等的工作示例会很棒。
解决方案
经过长时间的搜索......我偶然发现了这个网站......实现后代码如下所示:
Index.html 更改
ng-click="openurl(r1.url.$valid==true?r1.url:'https://' + r1.name + '.io')"
到
ng-click="is_url(r1.name+'.io')"
protractor.js 更改/添加
{name: 'Surviv', url: 'https://google.com'},
到
{name: 'Surviv'},
在主控制器内部:
添加:
$scope.is_url = function(str) {
regexp = /^(?:(?:https?|ftp):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/;
if (regexp.test('https://' + str))
{
chrome.windows.create({url: 'https://' + str, type: "popup"});
}
else
{
chrome.windows.create({url: 'http://' + str, type: "popup"});
}
};
我window.open
在前面的示例中使用过/使用
我已经将其更改为chrome.windows.create
与window.open
-
更改{url: 'http://' + str, type: "popup"}
或{url: 'https://' + str, type: "popup"}
至:'http://' + str, "_blank"
或'https://' + str, "_blank"
。
这花费了太多时间的谷歌搜索......希望遇到这个问题的其他每个人现在都能找到一种更简单的使用方法......
推荐阅读
- swift - 无法在真机上安装“项目名称”
- java - 检查谁在使用 Thread.interrupted() 而没有抛出 InterruptedException 的好方法?
- hibernate - 我真的需要两次列出@Entity 吗?
- symfony - 使用 Symfony 3 进行路由翻译
- reactjs - Reactable 不能在生产模式下工作,但在开发模式下工作正常
- typescript - 你将如何获得 TypeScript 中某个类型的方法的名称?
- c# - 如何编写风格化但独立于操作系统的 WPF 控件。使用 Microsoft.Windows.Themes
- imagej - 调整宏 ImageJ 中的阈值
- asp.net-mvc - 传入字典的模型项是 *** 类型,但此字典需要 *** 类型的模型项
- php - 我缺少什么 php 概念?