简单示例:我有一个文本区域并希望为其提供附加行为:在按下 enter
键时执行某些操作,并在按下 shift + enter
时换行到下一行。
我想我应该提供附加指令来添加该行为。 我已经完成了这个:http://jsbin.com/oruvuy/1/edit
P.S. 对我来说,一个奇怪的事情是:我手动调用了 $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>
但这是正确的做法吗?