как сделать ng-click должен срабатывать только при ширине устройства <480px? - PullRequest
Новая
       1

как сделать ng-click должен срабатывать только при ширине устройства <480px?

0 голосов
/ 21 ноября 2018

У меня есть сценарий, в котором мне нужен ng-click для работы с устройствами шириной менее 480 пикселей, но не для чего-то большего.Я пробовал условие if, но оно не работает. Функция переключения должна работать только на меньшем устройстве, и список не должен быть затронут в представлении рабочего стола, если переключено на меньшее устройство.

Я пробовал следующее;

Вот мой Плунжер

Любая помощь будет оценена.

Заранее спасибо. 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $window) {
  $scope.width = $window.document.body.clientWidth;

  if ($scope.width < 480) {
    $scope.showList = false;
  } else {
    $scope.showList = true;
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>


<body ng-controller="myCtrl">
  <div class="footer">
    <div class="container">
      <div class="row">
        <div class="col-md-5 widget" ng-click="showList = !showList;">
          <h2>sign in data</h2>
          <article class="widget_content">
            <ul ng-show="showList">
              <li>Get a quote</li>
              <li>Send quote</li>
            </ul>
          </article>
        </div>
        <div class="col-md-3 widget">
          <h2>CONTACT US</h2>
          <article class="widget_content">
            <ul>
              <li>Find a branch</li>
              <li>Contact us</li>

            </ul>
          </article>
        </div>
        <div class="col-md-4 widget">
          <h2>ABOUT</h2>
          <article class="widget_content">
            <ul>
              <li>Careers</li>
              <li>data</li>

            </ul>
          </article>
        </div>
      </div>
    </div>
  </div>

</body>

Ответы [ 4 ]

0 голосов
/ 21 ноября 2018

Ниже приведена ссылка на решение адаптивного веб-дизайна, которое в значительной степени объяснено аналогично вашей проблеме.

Используются медиа-запросы для проверки ширины менее 480px и на основе этого класса элементов-переключателей для отображения / скрытия меню нафункция щелчка элемента в JavaScript

https://www.youtube.com/watch?v=FDh7Mdl2oww&list=PL4cUxeGkcC9g9Vh9MAA-XKnfJsWZnPZFw&index=9

Спасибо

0 голосов
/ 21 ноября 2018

Вы получите ширину устройства со следующим 

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

Вы можете проверить условие if в обработчике кликов. 

if(width<480) {
   handleClick();
}


var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $window) {
  $scope.width = ($window.innerWidth > 0) ? $window.innerWidth : $window.document.body.clientWidth;
  if ($scope.width < 480) {
    $scope.showList = false;
  } else {
    $scope.showList = true;
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-controller="myCtrl">
  <div class="footer">
    <div class="container">
      <div class="row">
        <div class="col-md-5 widget" ng-click="showList = !showList;">
          <h2>sign in data</h2>
          <article class="widget_content">
            <ul ng-show="showList">
              <li>Get a quote</li>
              <li>Send quote</li>
            </ul>
          </article>
        </div>
        <div class="col-md-3 widget">
          <h2>CONTACT US</h2>
          <article class="widget_content">
            <ul>
              <li>Find a branch</li>
              <li>Contact us</li>

            </ul>
          </article>
        </div>
        <div class="col-md-4 widget">
          <h2>ABOUT</h2>
          <article class="widget_content">
            <ul>
              <li>Careers</li>
              <li>data</li>
            </ul>
          </article>
        </div>
      </div>
    </div>
  </div>
</body>

Если вы хотите, вы можете создать директиву 

app.directive('myDirective', ['$window', function ($window) {

     return {
        link: link,
        restrict: 'A'           
     };

     function link(scope, element, attrs){
       angular.element($window).bind('resize', function(){
           scope.width= $window.innerWidth;
       });    
     }    
 }]);

и использовать ее в своем div: 

<div my-directive ng-if="width > 320">
0 голосов
/ 21 ноября 2018

поместить функцию, определенную во фрагменте, во все списки, которые вы хотите переключить ... 

var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope,$window) {

$scope.toggleInSmallDevices = function(){
    var screenWidthNow = $window.document.body.clientWidth;
    console.log(screenWidthNow);
    if (screenWidthNow<480){
        $scope.showList = !$scope.showList; 
    }
    else {
        $scope.showList = true;
    }

}

        });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    
    <body ng-controller="myCtrl" ng-init="showList=true; toggleInSmallDevices();">
    <div class="container">
    	<div class="row">
    		<div class="col-md-5 widget" ng-click="toggleInSmallDevices()">
        	    <h2>sign in data</h2>
                <article class="widget_content">
                    <ul ng-show="showList">
                        <li>Get a quote</li>
                        <li>Send quote</li>
                    </ul>
                 </article>
    		</div>
            <div class="col-md-3 widget">
        	    <h2>CONTACT US</h2>
                <article class="widget_content">
                    <ul>
                        <li>Find a branch</li>
                        <li>Contact us</li>
                       
                 </ul>
                 </article>
    		</div>
            <div class="col-md-4 widget">
                <h2>ABOUT</h2>
                <article class="widget_content">
                  <ul>
                         <li>Careers</li>
                        <li>data</li>
                       
                 </ul>
                </article>
    		</div>
    	</div>
    </div>
</body>
0 голосов
/ 21 ноября 2018

Вы можете попробовать как:

вы можете проверить ширину через JS (id): 

document.getElementById(id).clientWidth;

Также вы можете проверить ширину через angular.element 

angular.element(document.getElementById(id)).clientWidth;
angular.element(document.querySelectorAll(".class")[0]).clientWidth;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...