文章/答案/技术大牛

发布

社区首页 >问答首页 >元素对元素焦点的角绑定类

问元素对元素焦点的角绑定类
EN

Stack Overflow用户

提问于 2017-10-06 09:12:45

回答 4查看 2.7K关注 0票数 7

在下面的角应用程序中，我有多行myelement ( input标记上的角指令包装器)。每次我需要集中/选择/突出其中的一个，样式中的.selected类就是这样做的。

在下面的应用程序中，除了聚焦到input标记之外，一切都很好，它需要受到css类selected的限制。也就是说，无论哪个元素有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>

javascript

html

css

angularjs

回答 4

Stack Overflow用户

回答已采纳

发布于 2017-10-09 14:48:44

考虑下面的例子。它使用了现在推荐的component特性AngularJS (从v1.5开始)。该示例非常简单，因此您可以轻松地了解正在发生的事情以及如何将其应用于您的项目。

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);

<body ng-app="app" ng-controller="MainController as vm">
    <my-element focused="vm.focused"></my-element>
</body>

票数 4

Stack Overflow用户

发布于 2017-10-10 13:18:09

 var elementComponent = {
bindings:{
     selected:'<'
  },
  controller:function($element){
     this.$onChanges = function(changes) {
       if(changes.selected.currentValue){
         $element[0].getElementsByClassName('textName')[0].focus()
       }
    }
  },
  template:'<input type="text" class="textName"  style="margin:4px">'
};

var controller = function(){
   this.list = [1];
   this.selected = 1
   this.add = function(){
     var length = this.list.length ;
      this.list.push(length + 1);
      this.selected = length + 1;
   }
};


angular.module('app', [])
       .component('element', elementComponent)
       .controller('appCtrl', controller);

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body ng-app="app" ng-controller="appCtrl as vm" >
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
  <button ng-click="vm.add()">Add New Cell</button>
  <div ng-repeat="item in vm.list"  >
    <element selected="item == vm.selected"  ng-click="vm.selected = item"></element>
  </div>
  Selected Element : {{vm.selected}}
</body>
</html>

这也许能满足你的要求。

票数 4

Stack Overflow用户

发布于 2017-10-13 07:38:19

在每一个向上/完成键上，检查类，并使用focus()、blur()来更改输入状态。在选项卡按下时，preventDefault()

angular
  .module('myApp',[])
  .controller('ListController', function($scope) {
    var listctrl = this;
    listctrl.list = ['1','2','3'];
    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',
      scope: {},
      link: function (scope, element, attrs) {
        var inputTag = element[0].children[0];
        var updateFocues = function(element) {
          if(element[0].className.indexOf('selected') !== -1) {
            scope.$apply(function() {
              inputTag.focus()
            });
          } else {
            scope.$apply(function() {
              inputTag.blur()
            });
          }    
        }

        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');
          }else if (event.keyCode === 9) {
            event.preventDefault();
          }
        });
        

        scope.$on('keyUp', function() {
          updateFocues(element)
        })
        scope.$on('keyDown', function() {
          updateFocues(element)
        })
      },
      controller: function ($scope) {

      }
    };
  })

 .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;
    }

<!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>

</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>
</body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46602312

复制

相似问题

问元素对元素焦点的角绑定类
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问元素对元素焦点的角绑定类EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问元素对元素焦点的角绑定类
EN