在我接下来的 Angular 应用程序中，我有多行 myelement(input 标记上的 Angular 指令包装器)。有时我需要聚焦/选择/突出显示其中之一，样式中的 .selected 类可以做到这一点。
在下面的应用程序中，除了焦点到 input 标签外，一切正常，它需要被 css 类 selected 限制。 IE。无论元素有类 selected，相应的 input 标签都应该被聚焦。我怎样才能做到这一点？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.container {
display: flex;
flex-direction: column;
width: 600px;
}
.notebook {
display: flex;
justify-content: center;
}
.cell {
margin: 5px;
padding: 5px;
}
.selected {
border-style: solid;
border-color: green;
border-width: 1px;
border-left-width: 5px;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="ListController as listctrl" class="notebook">
<div class="container">
<myelement ng-repeat="i in listctrl.list"
ng-click="listctrl.selected = $index"
ng-class="{selected : listctrl.selected === $index}"
class="cell"></myelement>
</div>
</div>
<script type="text/javascript">
angular
.module('myApp',[])
.controller('ListController', function($scope) {
var listctrl = this;
listctrl.list = [];
listctrl.selected = 0;
listctrl.addCell = function() {
var x = listctrl.list.length;
listctrl.list.push(x);
listctrl.selected = listctrl.list.length - 1;
}
listctrl.addCell();
$scope.$on('add', function (event, message) {
$scope.$apply(listctrl.addCell);
});
$scope.$on('keyUp', function(event) {
$scope.$apply(function(){
listctrl.selected = listctrl.selected - 1;
});
});
$scope.$on('keyDown', function(event) {
$scope.$apply(function(){
listctrl.selected = listctrl.selected + 1;
});
});
})
.directive('myelement', function($rootScope){
return {
template: '<input style="width: 95%"></input>',
restrict: 'E',
link: function (scope, element, attrs) {
var inputTag = element[0].children[0];
inputTag.focus();
element.on('keydown', function(event) {
if (event.keyCode === 13 && event.shiftKey) {
$rootScope.$broadcast('add');
} else if (event.keyCode === 38) {
$rootScope.$broadcast('keyUp');
} else if (event.keyCode === 40) {
$rootScope.$broadcast('keyDown');
}
});
},
controller: function ($scope) {
}
};
})
</script>
</body>
</html>
最佳答案
考虑以下示例。它使用 AngularJS(自 v1.5 起)现在推荐的 component 功能。该示例非常简单，因此您可以轻松理解正在发生的事情以及如何将其应用到您的元素中。
JavaScript
class MainController {
constructor() {
this.focused = true;
}
}
class MyElementController {
constructor($element) {
this.$element = $element;
}
$onChanges(changes) {
if (changes.focused.currentValue === true) {
this.$element[0].getElementsByTagName('input')[0].focus();
}
}
}
const myElementComponent = {
bindings: {
focused: '<'
},
controller: MyElementController,
template: `<input type="text">`
};
angular
.module('app', [])
.controller('MainController', MainController)
.component('myElement', myElementComponent);
HTML
<body ng-app="app" ng-controller="MainController as vm">
<my-element focused="vm.focused"></my-element>
</body>
关于javascript - 元素的 Angular 绑定(bind)类到元素焦点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46602312/