更改 class 元素 onkeyup

Question

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

userlist.html
message.html

在 message.html 模板中，一切正常，直到我按下让我们说（<input> 标签）"enter" 键入内容。键盘出现并且它不会向上滑动视图。当键盘可见时它显示旧消息。所以为了向上滑动视图。我正在考虑在标记的 keyup 上绑定一个事件并更改 css class 以更新视图。所以，我创建了指令。但问题是当我在 <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

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

在视图中：

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

在控制器中：

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

在视图中，再次针对同一作用域（控制器）中的任何元素：

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

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

更改 class 元素 onkeyup

change class of element onkeyup

javascript

css

onkeyup

angularjs