It's just as the title says.Let me ask you a question.We have created a textarea directive that corresponds to the focus movement with the Enter and Backspace keys.
After typing in textarea, press Enter to save the item and move focus to the next element, and press Backspace only when textarea is empty to save the item and move focus to the previous element, but I'm sorry for the confusing code, but I appreciate your cooperation.
ul.section-list ng-repeat="content in shop.contents"
li.section ng-repeat="item in content.items"
div
textarea name="body"my-directive="ng-model="item.body"ng-blur="itemSave(shop, content, item)"
angular.module('myDirective', [ ]).directive'myDirective', ->
{
restrict: 'A'
require: '?ngModel'
link:(scope, element, attrs, ngModel) ->
el=angular.element(element[0])
el.on 'keypress', (e)->
if.keyCode==13# When Enter is pressed
el.blur()
# I want to confirm with Enter and move on to the next element...
angular.element(element[0+1]).focus()# error
return
return
el.on 'keydown', (e)->
if.keyCode==8#Backspace key pressed
If scope.content.items [scope.$index].body=='#textarea is empty
el.blur()
# I want to confirm the Backspace key and move on to the previous element...
angular.element(element[0]).focus()# error
return
return
return
}
When working with directives in parallel, having a parent directive works.
https://jsfiddle.net/4c1t7v42/
Incidentally, the second argument for link() is the angular.element object, so
varel=angular.element(em[0]);
You do not need to do anything like .
angular.module('app', [])
.controller('AppController', function(){
this.items = ['aaa', 'bbb', 'ccc', 'ddd' ];
})
.directive('parent', function(){
US>return{
restrict: 'AE',
translate: true,
template: '<ng-transclude></ng-transclude>',
scope: {
},
controller:function($scope){
varchildren=[];
This.addChild=function(em){
children.push(em);
};
This.removeChild=function(em){
var index=children.indexOf(em);
if(index!==-1){
children.splice(index,1);
}
}
This.next=function(em){
var index=children.indexOf(em);
if(index!==-1){
children [(index+1)%children.length].focus();
}
};
This.prev=function(em){
var index=children.indexOf(em);
if(index!==-1){
children [(index+children.length-1)%children.length].focus();
}
};
},
};
})
.directive('child', function(){
function save(em){
// CODE FOR STORAGE
}
US>return{
require: '^^parent',
restrict: 'A',
scope: {
},
link: function(scope, elem, attrs, parent) {
parent.addChild(elem);
scope.$on('$destroy', function(){
parent.removeChild(em);
});
em.on('keypress', function(e){
if(e.keyCode===13){
save(em);
parent.next(em);
return false;
}
});
em.on('keydown', function(e){
if(e.keyCode===8&elem.val().length===0){
save(em);
parent.prev(em);
return false;
}
});
}
};
});<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<div ng-app="app"ng-controller="AppController as app">
<ul parent>
<ling-repeat="item in app.items">
<textarea child ng-model="item" cols="30" rows="10">/textarea>
</li>
</ul>
</div>
© 2024 OneMinuteCode. All rights reserved.