7
私の次のアプリケーションでは、myelement（角度方向のラッパーがinputタグ）の複数の行があります。一度にフォーカス/選択/ハイライトのいずれかを強調する必要がありますが、スタイルでは.selectedクラスがそうです。要素フォーカスの要素の角度バインドクラス
次のアプリケーションでは、selectedというコードでバインドする必要があるinputタグのフォーカスを除いてすべて正常に動作します。 I. selectedクラスを持つどの要素でも、対応するinputタグにフォーカスを当てる必要があります。どのように私はそれをacieveできますか？
<!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>
ng-class = "{selected：listctrl.selected === $ index}"には "？" selectedとlistctrl.selectedの間には三項関係があるのでまたは私はそれを間違って読んでいます。 –
@Dream_Capそれは3進ではなく、オブジェクトリテラルだけです – Phil
'element.hasClass（ 'selected'）&& inputTag.focus（）'のようなものを使用できませんか？あなたのディレクティブの 'priority'を' 0'よりも大きい値に設定する必要があるかもしれません。そのため、 'ngClass'の後にpost-link関数が実行されます。 – Phil