सरल उदाहरण: मैं एक पाठ क्षेत्र है और यह करने के लिए अतिरिक्त व्यवहार प्रदान करना चाहते हैं: enter
कुंजी पर कुछ करना और मुझे लगता है कि मुझे लगता है कि व्यवहार जोड़ने के लिए अतिरिक्त निर्देश प्रदान करना चाहिए shift + enter
AngularJS में कस्टम ईवेंट कैसे देखें?
पर अगली पंक्ति में जाते हैं। और मैंने यह किया है: http://jsbin.com/oruvuy/1/edit
पीएस एक हैकी चीज मेरे लिए अजीब लगती है: मैं मैन्युअल रूप से $digest()
का आह्वान करता हूं। ठीक है न? कोई विचार?
जे एस:
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>
लेकिन यह है कि ऐसा करने का सही तरीका क्या है?
ग्रेट, स्पष्टीकरण के लिए धन्यवाद। लेकिन मुझे घटनाओं के बारे में समझा नहीं गया है। AngularJS पृष्ठ पर सभी घटनाओं के लिए सुन रहा है और फिर हर वस्तुओं की स्थिति की जांच? क्या इसके बारे में कोई समझदार लेख है? मैंने इसके बारे में AngularJS पर पढ़ा है, लेकिन जल्दी से समझना मुश्किल है। – ValeriiVasin
मैं एक अच्छा संदर्भ के रूप में [इस स्टैक ओवरफ्लो प्रश्न] की सिफारिश करता हूं (http://stackoverflow.com/questions/12463902/how-does-the-binding-and-digesting-work-in-angularjs)। – jingman