AngularJS querySelector by ID Returns Undefined

Question

Here is what my index.html looks like:

And this is the Javascript code (angular):

var controllerElement = document.querySelector('[id="tile3"]');
console.log(controllerElement.getAttribute('class'));
var controllerScope = angular.element(controllerElement).scope();

As you can see, I'm trying to find the controllerElement by searching for an id equal to tile3. However, whenever I get to the next line the program crashes with this error:

Uncaught TypeError: Cannot read property 'getAttribute' of null

Is there something obvious I'm missing?

EDIT

Here is the full code, now the controllerScope var is being undefined for some reason...

var update = function(id, channel){
    var controllerElement = document.querySelector('#tile3');
    console.log(controllerElement.getAttribute('ng-controller'));
    var controllerScope = angular.element(controllerElement).scope();
    console.log(controllerScope);
    controllerScope.$apply(function () {
        controllerScope[id].username = channel.username;
        controllerScope[id].keyword = channel.keyword;
        controllerScope[id].percent = channel.percent;
        controllerScope[id].views = channel.views;
        controllerScope[id].link = channel.link;
    });
};

(function(){
    var app = angular.module("testApp", []);

    var TileController = function($scope){
        $scope.channels = [];
        for(i = 0; i < 25; i++){
            var channel = {
                username:"John",
                keyword:"Doe",
                percent:"50%",
                views:5000,
                link:"http://www.twitch.tv/lolyou"
            };
            $scope.channels.push(channel);
        }

    };

    app.controller("TileController", ["$scope", TileController]);

    update(3, {username:"Yo",
                keyword:"Bro",
                percent:"40%",
                views:35,
                link:"http://www.twitch.tv/nickbunyun"});
})();

The line where it says console.log(controllerScope); is just printing "undefined".

What are you talking about? The line where it says document.querySelector(...);? The error is being thrown on the second line. — Scooter, Nov 09 '15 at 01:27
What do you mean "in a controller or something"? You can see the code I've provided. I think I've isolated the problem. — Scooter, Nov 09 '15 at 01:33
@ScottyPippen why dont you use getElementById instead of querySelector? It's much faster http://jsperf.com/getelementbyid-vs-queryselector — Tim Sheehan, Nov 09 '15 at 01:51
It turns out the issue was different, that is now fixed. What's still not working is the controllerScope element is coming out undefined. — Scooter, Nov 09 '15 at 01:59
It coulb be that you're trying to get the element before the DOM has been constructed. Check this out: http://stackoverflow.com/a/21096797/851045 — Giraldi, Apr 28 '17 at 11:26

score 1 · Answer 1 · answered Nov 09 '15 at 01:29

1

If you are using querySelector then you could/should just use #tile3 as value passed to the function, so:

var tile3 = document.querySelector('#tile3')

answered Nov 09 '15 at 01:29

Giancarlo PSK

231
1
7

var controllerElement = document.querySelector('#tile3'); That code still throws the same error. – Scooter Nov 09 '15 at 01:32
2

I believe you need to post the whole JavaScript code you wrote. It seems like the div is not created when you try to get it, therefore it's null. – Giancarlo PSK Nov 09 '15 at 01:37
awww, I had the script created in the head of my index file so it was being called before the body was created I guess. I just moved the script tags to the bottom of the body but I'm getting a new error: "Uncaught TypeError: Cannot read property '$apply' of undefined" which is weird considering that it successfully printed out the class attr of the element meaning that the element is defined. – Scooter Nov 09 '15 at 01:54

AngularJS querySelector by ID Returns Undefined

1 Answers1