AngularJS Unknown TypeError: Cannot Read Property '1' Of Null

Question

Below Is the code that Im getting problem with:

//Main Codes for the Diary App

(function () {
//Create a new diary app
var diary = angular.module('diary', ['ngRoute']);

//Define a Router for the App
diary.config(function ($routeProvider) {
        $routeProvider.


            when('/', {
                templateUrl: 'partials/wall.php',
                controller: 'DiaryWallController'
            }).


            when('/images', {
                templateUrl: 'partials/images.html',
                controller: 'DiaryImagesController'
            }).


            when('/audio', {
                templateUrl: 'partials/audio.html',
                controller: 'DiaryAudioController'
            }).


            otherwise({
                redirectTo: '/'
            });
});

//Define Controllers
diary.controller('DiaryWallController', function($scope) {
    $scope.message = "Lets do this!! Wall of this site";
});

diary.controller('DiaryImagesController', function($scope) {
    $scope.message = "Lets do this!! Images of this site";
});

diary.controller('DiaryAudioController', function($scope) {
    $scope.message = "Lets do this!! Audio of this site";
});})();

I am getting this Unknown TypeError: Cannot read property '1' of NuLL. It successfully fetch the files specified in the route but it doesn't display in the site.. I have checked the console:

XHR finished loading: GET "http://localhost/mobile%20diary/app/partials/images.html".

But the contents of the loaded page is not displayed in the site. I check in resources and in there the images.html file is loaded and I can see the file preview but it is not shown in the site.

Below is the HTML Shell file:

<!DOCTYPE html>
<html ng-app="diary">
<head lang="en" ng-controller="">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
</head>
<body>


<header>
<nav class="menu-nav">
    <ul>
        <li class="menu-buttons"><a href="#" id="selected"><i class="fa fa-newspaper-o"></i></a></li>
        <li class="menu-buttons"><a href="#images"><i class="fa fa-file-text-o"></i></a></li>
        <li class="menu-buttons"><a href="#audio"><i class="fa fa-image"></i></a></li>
        <li class="menu-buttons"><a href=""><i class="fa fa-microphone"></i></a></li>
        <li class="menu-buttons"><a href="" id="selected"><i class="fa fa-navicon"></i></a></li>
    </ul>
</nav>
</header>

<div ng-view>

</div>


<script src="js/angular.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>

I don't see any relevant code that would cause the problem, maybe it's in another file? You have a null pointer somewhere and are probably trying something like this: variable['1'] — Jason Goemaat
– Jason Goemaat, Commented Jan 20, 2015 at 7:58
do you have <ng-view></ng-view> in your index.html? it is a code needed to show template. — changtung
– changtung, Commented Jan 20, 2015 at 8:02
Got it solved .. I left the <head lang="en" ng-controller=""> controller blank .. i just deleted it and finally it appears. — ChanX
– ChanX, Commented Jan 20, 2015 at 8:11

Uriah Blatherwick · Accepted Answer · 2015-03-12 22:48:34Z

9

I also had this same error and similar to the comment from @ChanX I had an error in an ng-controller attribute. In my case, I had accidentally added a name of a css class that I had intended to put in the class attribute to the ng-controller attribute by mistake.

My hypothesis is that you might see this error any time there is a problem parsing an ng-controller attribute. Anyway, I sure am glad I found this on SO as it was a real head-scratcher. Would be nice if the error message was more informative.

answered Mar 12, 2015 at 22:48

Uriah Blatherwick

5547 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ruisilva450 · Accepted Answer · 2016-03-23 12:06:46Z

0

This seems to be because you have are using localhost url. Likely for debugging or dev environment.

And there is a function on content_script.js that is as following:

function scanLinks() {
  var current_domain = document.location.href.match(/^https?:\/\/(?:www\.)?([^\.]+\.[^\/]+)/i);

  $("a[href][muse_scanned!=true]").each(function(i) {
    this.setAttribute("muse_scanned", true);
    var href = this.href;
    var domain = href.match(/^http:\/\/(?:(?:www\.)?(?:[^\.]+\.(notlong\.com|qlnk\.net|ni\.to|lu\.to|zzang\.kr)|([^\.]+\.[^\/]+)))/i);
    if (domain) {
      domain = domain[1] || domain[2] || false;
    }
    if ((domain != current_domain[1]) && (expandSvcList.indexOf(domain) > -1)) {
      this.title = "Expanding URL...";
      expandLink(this);
    }
  });
}

The important part is:

var current_domain = document.location.href.match(/^https?:\/\/(?:www\.)?([^\.]+\.[^\/]+)/i);

That checks your current link, in your case "http://localhost/..." for a valid url like "http://www.localhost/". Because this isn't the case it causes the error when accessing current_domain[1] because current_domain is null.

edited Mar 23, 2016 at 12:06

answered Mar 23, 2016 at 11:57

ruisilva450

435 bronze badges

2 Comments

ChanX Over a year ago

thanks for the additional function. I will implement this into my app

ruisilva450 Over a year ago

You don't need to implement anything. Odds are that you are not going to use localhost as production address.

Collectives™ on Stack Overflow

AngularJS Unknown TypeError: Cannot Read Property '1' Of Null

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related