Issue
I am making a URL list inside an angular App, Most of the URLs all lead to https://example.io… However a select few have URLs such as https://example.io. I don’t want to specify the URL inside every object… I just want to validate the URL then either open the website with http:// or https:// depending on what’s valid.
I’m using ng-click and binding it to a window open with the url along w/ image nested.
Index.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>
protractor.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');
}
};
}]);
The main thing here is the url validation,
and the ng-click="openurl(r1.url.$valid == true ? 'http://' + r1.name '.io' : 'https://' + r1.name + '.io')"
I am clueless as to why this isn’t working, it will open the popup, but it will ignore the ternary & $valid parameters completely…
I’ve tried swapping the
– .$valid==true
w/
– .$valid==false
but I get the same result! Why’s this not working?
A working example on plunkr, jsfiddle, or codepen, etc would be great.
Solution
After long hours of searching…
I stumbled upon This Website…
After implementation the code would look like this:
Index.html changes
ng-click="openurl(r1.url.$valid==true?r1.url:'https://' + r1.name + '.io')"
to
ng-click="is_url(r1.name+'.io')"
protractor.js changes/ additions
{name: 'Surviv', url: 'https://google.com'},
to
{name: 'Surviv'},
inside the main controller:
add:
$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"});
}
};
I used window.open in the previous example/use
I have since changed it to chrome.windows.create
to use this with window.open –
change {url: 'http://' + str, type: "popup"} Or {url: 'https://' + str, type: "popup"}
to: 'http://' + str, "_blank" Or 'https://' + str, "_blank".
This took way too many hours of googling… Hopefully everyone else who ever runs in to this issue will now find an easier method of use…
Answered By – 255.tar.xz
Answer Checked By – Willingham (AngularFixing Volunteer)