From Angular Element To JQuery Element

Question

I want to check if element is in viewport. I've taken the following approach:

In html...

<html ng-app="myapp">...

<div ng-if="IsElementInViewport(this)"></div>

In js...

$scope.IsElementInViewport= function (el) {
            console.log(el);
            return true;
}

In console...

Object { $$childTail: Object, $$childHead: Object, $$nextSibling: Object, $$watchers: Array[9], $$listeners: Object, $$listenerCount: Object, $$watchersCount: 11, $id: 215, $$ChildScope: b(), $parent: Object, 9 more… }

My challenge is how to convert or see the passed-in el as a JQuery element (or equivalent) where I can, for instance, do $elem.offset().top. That would resolve my problem.

score 0 · Answer 1 · answered Dec 29 '15 at 07:22

0

You can use id in div like <div id="viewport" ng-if="IsElementInViewport()"></div>

And then get it in controller like jQuery:

$scope.IsElementInViewport= function () {
    var el = angular.element("#viewport");
    console.log(el);
    return true;
}

answered Dec 29 '15 at 07:22

NiranjanK

427
2
6
23

that may work if I have just a few such elements or if I know them in advance. Unfortunately, I need a function that will work with arbitrary elements. Putting var $elem = angular.element("#"+el.$id) in the original function may be more like it, but it still fails. – user3607612 Dec 29 '15 at 07:35

score 0 · Answer 2 · answered Dec 29 '15 at 08:37

Maybe it could be for you using angular-inview ?

Here is an example from its documentation:

angular.module('basicApp', ['angular-inview']).controller('basicCtrl', function basicCtrl($scope, $sce) {
  var logId = 0;
  $scope.testLines = [];
  for (var i = 20; i >= 0; i--) {
    $scope.testLines.push(i);
  };
  $scope.inviewLogs = [];
  $scope.lineInView = function(index, inview, inviewpart, event) {
    var inViewReport = inview ? '<strong>enters</strong>' : '<strong>exit</strong>';
    if (typeof(inviewpart) != 'undefined') {
      inViewReport = '<strong>' + inviewpart + '</strong> part ' + inViewReport;
    }
    $scope.inviewLogs.unshift({
      id: logId++,
      message: $sce.trustAsHtml('Line <em>#' + index + '</em>: ' + inViewReport)
    });
    console.log(event);
    return false;
  }
});

#hud {
  background: white;
  border: 1px solid gray;
  bottom: 0;
  margin: 20px;
  min-width: 220px;
  position: fixed;
  right: 0;
  top: 0;
  width: 25%;
  overflow: auto;
}

#lines {
  list-style: none;
  margin: 0;
  padding: 0;
}

#lines li {
  height: 100px;
}

#lines li:nth-child(odd) {
  background-color: lightgray;
}

<html id="ng-app" ng-app="basicApp">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>angular-inview basic example</title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
  <script  type="text/javascript" src="//cdn.rawgit.com/thenikso/angular-inview/master/angular-inview.js"></script>
  
</head>
<body ng-controller="basicCtrl">
  <div id="hud">
    <ul>
      <li ng-repeat="l in inviewLogs" ng-bind-html="l.message"></li>
    </ul>
  </div>
  <ul id="lines">
    <li ng-repeat="t in testLines" in-view="lineInView($index, $inview, $inviewpart, $event)">This is test line #{{$index}}</li>
  </ul>
</body>
</html>

Using 1.4.7... Am trying angular-inview as proposed... But trying... angular.module('modSK3News', ['ngRoute'], ['angular-inview']) gives me... Error: [$injector:modulerr] http://errors.angularjs.org/1.4.7/$injector/modulerr — user3607612, Dec 29 '15 at 09:54
Is _angular-inview.js_ correctly included in your index.html file? — beaver, Dec 29 '15 at 09:59
Indeed I have linked the respective files, for jquery, bootstrap, angularjs, angularjs-route, etc — user3607612, Dec 29 '15 at 19:48
So strange... I've edited the code including also your libs (jquery,angular-route and angular-moks), using release 1.4.7 and put in a [CodePen](http://codepen.io/beaver71/pen/jWVVYR): it's working... — beaver, Dec 29 '15 at 20:08
Finally, at least concerning linking angularjs libraries and module declaration, I have found that the solution is to replace angular.module('modSK3News', ['ngRoute'], ['angular-inview']) with angular.module('modSK3News', ['ngRoute', 'angular-inview']) - according to http://stackoverflow.com/questions/31273253/paginate-almost-anything-with-angular-js-failed-to-instantiate-module-error — user3607612, Jan 01 '16 at 04:03

From Angular Element To JQuery Element

2 Answers2