Question

我制作了一个类似于黑客新闻的简单应用程序，以了解如何使用angularJS。

当我提交链接输入时，我遇到了问题：

我输入＆＃34; http://www.foo.com＆＃34; 已提交，并返回＆＃34; www.foo.com＆＃34;

否则，我输入＆＃34; www.foo.com＆＃34; 已提交，并返回＆＃34; localhost：3000 / www.foo.com＆＃34

在提交没有HTTP的链接后，我无法弄清楚如何摆脱此网址的当前位置：//

没有特殊条件来操纵此链接，我的应用程序正在使用lib来实现angularjs：

角-UI-router.js

有代码

HTML：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Link test</title>

  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
  <script src="js.js"></script>

</head>
<body ng-app="scopeExample">
  <div ng-controller="MyController">
  Your link:
    <input type="text" ng-model="url">
    <button ng-click='sayLink()'>post link</button>
  <hr>
  <a ng-href="{{link}}" target="_self">{{link}}</a>
</div>
</body>
</html>

JS：

(function(angular) {
  'use strict';
angular.module('scopeExample', [])
  .controller('MyController', ['$scope', function($scope) {
    $scope.url = 'www.zombo.com';

    $scope.sayLink = function() {
      $scope.link = $scope.url;
    };
  }]);
})(window.angular);

有实时预览 http://plnkr.co/edit/iDT0C4vi22mGMuxw8z9s?p=preview

任何人都可以解释为什么会这样吗？

谢谢！

Answer 1

它与Angular没有任何关系：它只是将链接上的href属性设置为输入中输入的内容（减去任何前导/尾随空白区域）想）。

这是由于浏览器如何处理此类标记中的相对/绝对链接：

如果链接以协议开头，例如http://，那么它将作为完整网址进行处理
否则，如果链接以正斜杠/开头，则将链接视为当前域/协议的绝对路径
否则，它将链接视为相对于当前基本href（可以是当前页面，或者可以与域上的根路径相同，具体取决于<base>标记指定的内容）

我认为www.foo.com正在发生这种情况。您的基本href必须为http://localhost:3000/，因此浏览器会将该链接视为http://localhost:3000/www.foo.com

要对此进行排序，只需添加协议即可。从https://stackoverflow.com/a/3543261/1319998开始，您可以执行以下操作：

$scope.sayLink = function() {
  if (!/^https?:\/\//i.test($scope.url)) {
    $scope.link = 'http://' + url;
  }   
};

如何摆脱AngularJS中当前的域名链接？

1 个答案: