how to get new line event in angular js

Question

I am trying to get new line event in angular js .Ia m able to get it in jQuery but fail to get in angular js

I do like that in jQuery How to get event when text goes to new line? http://jsfiddle.net/Blade0rz/TnTj9/

But same thing I apply on angular I did not get event why ? same thing I need to get event when user move to bottom of div ? Mean when user scroll text to bottom it show alert

I follow this link Detecting when user scrolls to bottom of div with jQuery Here is my code

http://plnkr.co/edit/HfFnCuRnKkIQvww2lgSm?p=preview

   var app =angular.module("app",['ionic']);
    app.controller('cntr',function($compile,$interval){
        var h = -1;
        $interval(function(){

            var newHeight =angular.element(document.getElementById('appendId')).append("Hi this test ").offsetHeight;
            if(h == -1) h = newHeight;
            if(h != newHeight) {
                h = newHeight;
                 alert("I've changed height");
            }

           /* if((this).scrollTop() + (this).innerHeight() >= this.scrollHeight) {
               alert('end reached');
           } */
        },1000)

    })

score 0 · Accepted Answer · answered Jul 23 '15 at 12:56

Don't put Dom manipulations in controllers. Use directives for it. Try my example it fire new line events and scroll trext to bottom to console.

var app = angular.module("app", ['ionic']);
app.controller('cntr', function($scope, $interval) {
  var h = -1;
  $scope.inner = 'hello';
  $interval(function() {
    $scope.inner += 'Hi this test Hi this test Hi this test Hi this ';
  }, 1000)

});

app.directive('newLine', function() {
  return {
    restrict: "AE",
    replace: true,
    transclude: true,
    template: '<div ><span class="wrapper" ng-transclude></span></div>',
    link: function(scope, element, attrs) {
      var wrapper = element.children()[0];
      var height = wrapper.offsetHeight;

      scope.$watch('inner', function() {
        var newHeight = wrapper.offsetHeight;
        if (newHeight > height) {
          console.log('Alert: new line added!')
          height = newHeight;
        }
      });

      element.on('scroll', function() {
        if (element[0].scrollHeight - element[0].scrollTop === element[0].clientHeight) {
          console.log('Alert: scroll to bottom!');
        }
      });
    }
  }
})

<!DOCTYPE html>
<html ng-app="app">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Ionic List Directive</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.0.1/css/ionic.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.0.1/js/ionic.bundle.min.js"></script>
</head>

<body>

  <div ng-controller="cntr">
    <div new-line id="appendId" style="border:1px solid red;width:100%;height:100px;overflow:auto">{{inner}}</div>
  </div>

</body>

</html>

how to get new line event in angular js

1 Answers1