javascript - 更改元素的类 onkeyup

Question

我正在研究 angularjs应用程序。这是一款手机聊天应用。它有两个模板

1. 用户列表.html
2. message.html

在message.html模板一切正常，直到我按下让我们说(<input> 标签)“输入”输入内容。键盘出现并且它不会向上滑动 View 。当键盘可见时它显示旧消息。所以为了向上滑动 View 。我正在考虑在标记的 keyup 上绑定(bind)一个事件并更改 css 类以更新 View 。所以，我创建了指令。但问题是当我在 <input> 上添加指令时标签。我只能访问输入标签的元素。我想在指令中访问模板的完整 DOM 元素。如何做到这一点？

message.html

<div class="chat-sidebar-content">   element
<div class="chat-sidebar-chat chat-sidebar-panel2" id="chat-sidebar-user-1"> //I want to change class of this 

</div>

<footer class="chat-sidebar-footer form-group">
    <input class="form-control input-dark fs-mini" my-directive type="text"  placeholder="Type your message">    //added the directive here
</footer>
</div>

directive.js

angular.module('testApp').directive('myDirective', function() {


return function(scope, element, attr){

    console.log(element);

    element.bind("keyup", function(){

        console.log('keyup');    //this works
    });
};

});

Answer 1

这是您可以执行的操作的示例:

在 View 中:

<input class="form-control input-dark fs-mini" ng-keyup="checkSomething()" type="text"  placeholder="Type your message">

在 Controller 中:

$scope.condition;
$scope.checkSomething = function (){
    $scope.condition = true;
};

在 View 中，再次针对同一范围内的任何元素( Controller ):

<div ng-class="condition ? 'class-1' : 'class-2' " id="chat-sidebar-user-1">

这只是一个例子，如果你没有什么要检查的，请随意将 $scope.condition = true; 直接放在 ng-keyup 指令中。