我正在研究 angularjs
应用程序。这是一款手机聊天应用。它有两个模板
- 用户列表.html
- 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
});
};
});
最佳答案
这是您可以执行的操作的示例:
在 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 指令中。
关于javascript - 更改元素的类 onkeyup,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28494817/