querySelectorAll in AngularJS partial ng-view

Question

I'm trying to use queryselectorAll to get all elements with a certain class name. I have a problem where I can only get results from elements in the index.html page. If I try to get a nodelist from a partial (ng-view) html page I get an empty result back.

App.js

var myApp = angular.module('myApp', ['ngRoute', 'articleControllers']);
myApp.config(['$routeProvider', function($routeProvider){
    $routeProvider.
    when('/main', {
        templateUrl: 'lib/partials/main.html',
        controller: 'MainController'
    })
}]);

controller.js

var articleControllers = angular.module('articleControllers', []);
articleControllers.controller('MainController', ['$scope', '$http', function ($scope, $http){
    $http.get('http://...').success(function(data) {
        $scope.articles = JSON.parse(data);
    });
}]);

index.html

(body, header, ...)
    <section ng-view>
    </section>
(footer, ...)

lib/partials/main.html

...
<div class="nextArticle">
    <button class="next_btn" title="View next article"> link text</button>
</div>
...

finally: helper.js (which is a script I call like every other script in index.html)

var elList = document.querySelectorAll('.next_btn');
Array.prototype.forEach.call(elList, function(el) {
    console.log("Found: " + el);
});

So to recap: Its like querySelectorAll can only find elements in the index.html and not in the partial views with ng-view. Anyone an idea of what could be wrong? I'm trying not to use jquery.

Jahanzaib Aslam · Accepted Answer · 2015-05-03 08:47:42Z

1

Move your helper.js code to custom directive. https://docs.angularjs.org/guide/directive

What are Directives?

At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS's HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.

answered May 3, 2015 at 8:47

Jahanzaib Aslam

2,8323 gold badges25 silver badges28 bronze badges

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

Comments

control-panel · Accepted Answer · 2015-05-03 12:03:37Z

1

That is because ng-view load the template after angular gets loaded, and the JS code which you have added is firing before the ng-view renders the template, I think you could solve this by writing a directive for ng-view that will will fire your jQuery code once your ng-view content gets loaded

Basically you need to wrap your code in element.on('load' event so that it will ensure that code will available when jQuery code is firing

app.directive('ngView', ['$timeout', function($timeout){
   return {
      restrict: 'AE',
      link: function(element, attrs){
          $timeout(function(){
              element.on('load', function(event){
                 //your jQuery code will lie here 
                 //that will also get the DOM of ng-view template
              });
          });
      }

   }
}]);

edited May 3, 2015 at 12:03

control-panel

2756 silver badges18 bronze badges

answered May 3, 2015 at 9:03

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

4 Comments

control-panel Over a year ago

I'm playing with your code. I get acces inside the compile, but the element.on(...) never fires. Also I'm trying not to use jQuery (but it is loaded at the moment). I also found a 'fix' with instead of compile using link and a timer.

Pankaj Parkar Over a year ago

Yes you should use link function with $timeout @control-panel look at my edit

control-panel Over a year ago

Is there an alternative to element.on(.... Something that works in javascript would be great. element.on is not a function I get.

Pankaj Parkar Over a year ago

What is problem with element.on AngularJS will handle that using jQLite which in built smaler version of JQuery

Collectives™ on Stack Overflow

querySelectorAll in AngularJS partial ng-view

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related