Search code examples
angularjsangularjs-ng-href

AngularJS ngHref why lowercase

I'm trying to bind href attribute to my link using ngHref, but AngularJS lowercases it. How can I avoid this behavior?

<a ng-href="http://preview-{{preview.hash}}.test.com/">{{preview.title}}</a>

It lowercases preview.hash, I'd like not to do this.

Solution

  • It is not angular that is lowercasing. It is the browser. The browser lowercases everything in the domain portion of the URL. (Type in GOOGLE.COM and you go to google.com)

    Take a look at this example: http://jsbin.com/zupupupo/4/edit?html,js,output

    <body ng-app="myApp">
    <div ng-controller="MyController">
        1. <a ng-href="http://preview-{{preview.hash}}.test.com/">{{preview.title}}</a> Dynamic in the domain
        <br />
        2. <a ng-href="http://preview.test.com/{{preview.hash}}">{{preview.title}}</a> - Dynamic after domain
     </div>  

  3. <a href="http://preview-TeST.test.com/TeST">Hard Coded Link</a>
</body>

<script>
var myApp = angular.module('myApp',[]);

myApp.controller('MyController',function($scope){
  $scope.preview = {
    hash: 'TeST',
    title: 'NG HREF Dynamic Link'
  };
});
</script>

    If you inspect the value angular is using the casing that came from the value. When you click/hover over the link the browser lowercases it. (example 1)

    Upper case characters after the domain portion are preserved. (example 2)

    To demonstrate this has nothing to do with angular, this is hard coded link with upper case in the domain and after the domain portion of the url. (example 3)