作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
简单示例:我有一个文本区域并想为其提供额外的行为:在 enter
键上做一些事情,然后在 shift + enter
上转到下一行
我想我应该提供额外的指令来添加该行为。我已经这样做了:http://jsbin.com/oruvuy/1/edit
附言一件 hackie 事情对我来说似乎很奇怪:我手动调用 $digest()
。可以吗?有什么想法吗?
JS:
angular.module('Chat', [])
.directive('enterSubmit', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var submit;
$(element).on({
keydown: function (e) {
submit = false;
if (e.which === 13 && !e.shiftKey) {
submit = true;
e.preventDefault();
}
},
keyup: function () {
if (submit) {
scope.$eval( attrs.enterSubmit );
// flush model changes manually
scope.$digest();
}
}
});
}
};
});
function ChatCtrl($scope) {
$scope.messages = [{
text: 'Sample Message',
datetime: new Date()
}];
$scope.add = function () {
$scope.messages.push({
text: $scope.message,
datetime: new Date()
});
$scope.message = '';
};
$scope.message = '';
}
<body ng-controller="ChatCtrl">
<h1>Leave message:</h1>
<form>
<div class='hint'>Click <Enter> to submit :)</div>
<textarea
cols="30"
rows="5"
ng-model="message"
enter-submit='add()'
></textarea>
<br />
<button type="submit" ng-click="add()">Send message!</button>
</form>
<h3>Messages list:</h3>
<table>
<tr>
<th>Text</th>
<th>Date</th>
</tr>
<tr ng-repeat="message in messages">
<td class='text'>{{message.text}}</td>
<td class='date'>{{message.datetime | date:"HH:mm:ss"}}</td>
</tr>
</table>
</body>
但这是正确的做法吗?
最佳答案
是的,在指令的链接函数中绑定(bind)事件正是您想要做的。
调用 $digest 不是 hacky - 你示例中的消息被添加到 keyup
上的模型中,并且 Angular 不会消化这些更改,直到有人告诉它。它实际上会在下一个 keydown
时被消化,但由于您需要在 keyup
之后发生 $digest,因此您必须手动调用它。
关于javascript - 如何在 AngularJS 中观察自定义事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14925728/
我是一名优秀的程序员,十分优秀!