Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 382
ChanX Avatar asked Jan 20 '15 07:01

ChanX


1 Answers

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.

like image 121
Uriah Blatherwick Avatar answered Sep 22 '22 11:09

Uriah Blatherwick