简单的例子:我有一个文本区域,并想为它提供额外的行为:在enter
键上做一些事情,然后转到shift + enter
上的下一行
我想我应该提供额外的指令来添加该行为。我做到了:http://jsbin.com/oruvuy/1/edit
附言:有一件事对我来说似乎很奇怪:我手动调用$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>
但这样做正确吗?
是的,在指令的链接函数中绑定事件正是您想要做的
调用$digest并不容易-示例中的消息是在keyup
上添加到模型中的,Angular在告诉它之前不会消化这些更改。它实际上会在下一个keydown
上消化,但由于您需要在keyup
之后进行$digest,因此您必须手动调用它。