ng-класс не вступает в силу, пока элемент не находится - PullRequest
Новая
       15

ng-класс не вступает в силу, пока элемент не находится

0 голосов
/ 15 апреля 2020

У меня есть следующий код: 

 <span data-toggle="collapse" data-target="#some-id"> 
                <span class="glyphicon" ng-class="ctrl.test() ? 'glyphicon-minus-sign': 
               'glyphicon-plus-sign'">
            </span>
</span>

Чем в контроллере: 

ctrl.test = function () {
  var el = document.getElementById('some-id');
  return el.getAttribute('aria-expanded') === 'true';
 };

Проблема здесь в том, что при нажатии на span работает класс ng , но только если я уберу указатель мыши оттуда ... только тогда применяется класс "знак-глификон" или "знак-минус".

1 Ответ

0 голосов
/ 15 апреля 2020

Ваш код должен выглядеть примерно так: 

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-controller="myCtrl">

<script>
var app = angular.module("myApp", []); 
app.controller("myCtrl", function($scope) {
    $scope.isCollapsed = true;
    $scope.test = function() {
        const el = document.getElementById('demo');
        $scope.isCollapsed = el.getAttribute('aria-expanded') === 'true';
    }
});
</script>

  <span class='glyphicon'
        data-toggle="collapse" 
        data-target="#demo"
        ng-class="{'glyphicon-plus-sign' : isCollapsed, 'glyphicon-minus-sign' : !isCollapsed}"
        ng-click="test()">
    <span id="demo" class="collapse">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </span>
  </span>

</body>
</html>
...