元素的角度绑定类到元素焦点

Question

元素的角度绑定类到元素焦点

bru*_*yne 7 html javascript css angularjs

在我的下面的角度应用程序中,我有多行myelement(角度指令包装器在input标签上).我需要集中/选择/突出其中一个,.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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Vla*_*nek 4

考虑以下示例。它使用componentAngularJS 现在推荐的功能（自 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);

Run Code Online (Sandbox Code Playgroud)

超文本标记语言

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，7 月前
查看次数：	1208 次
最近记录：	8 年，7 月前