Question

我正在尝试在角度js中获取新的线事件。我能够在jQuery中获取它但却无法获得角度js

我在jQuery中喜欢它 How to get event when text goes to new line? http://jsfiddle.net/Blade0rz/TnTj9/

但我同样适用于角度我没有得到事件为什么？同样的事情，当用户移动到div的底部时我需要获取事件？意思是当用户将文本滚动到底部时显示警告

我关注此链接 Detecting when user scrolls to bottom of div with jQuery 这是我的代码

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)

    })

Answer 1

不要把Dom操纵放在控制器中。使用指令。试试我的例子，它会触发新行事件并将trext滚动到底部控制台。

＆＃13;

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!');
        }
      });
    }
  }
})

＆＃13;

<!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>

＆＃13;

如何在角度js中获得新的线事件

1 个答案: