angularjs if/else 语句和窗口宽度 [英] angularjs if/else statement and window width

问题描述

我是 AngularJS 的新手，最近将它引入了我的应用程序.我正在尝试在我的控制器中重写一些现有的 jQuery 代码，但是，有一次，我使用:

jQuery:

if ($(window).width() <700) {$('.productsHeading').on('click', function() {$(".productsBody").hide();$(".aboutUsBody").show();});}

我可以使用 ng-hide="productsBody" 和 绕过 .hide() 和 .show()我的 DIV 中的 ng-hide="aboutUsBody" .. 这些是通过 ng-click="productsheading()" 处理的.. 但是，我面临的问题是，如何我处理:

if ($(window).width() <700) {

在 AngularJS 中?我使用的是 AngularJS v1.1.5

解决方案

在 AngularJS 中，如果您想对 HTML 或 DOM 操作进行更改，那么推荐或最佳实践是使用相同的指令.

写一个指令可能下面的链接有帮助:

关于窗口内宽尺寸变化的 AngularJS 事件

http://jsfiddle.net/jaredwilli/SfJ8c/

指令的 HTML

window.height: {{windowHeight}}<br/>window.width: {{windowWidth}}<br/>

指令的 Javascript 代码

 app.directive('resize', function ($window) {返回函数(范围，元素){var w = angular.element($window);scope.getWindowDimensions = 函数 () {返回 {'h': w.height(),'w': w.width()};};scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {scope.windowHeight = newValue.h;scope.windowWidth = newValue.w;scope.style = 函数 () {返回 {'高度':(newValue.h - 100) + 'px','宽度':(newValue.w - 100) + 'px'};};}， 真的);w.bind('resize', function () {范围.$应用()；});}})

I am new to AngularJS and recently introduced it into my application. I am trying to re-write some of my existing jQuery code in my controllers, however, on one occasion, i am using:

jQuery:

if ($(window).width() < 700) {

   $('.productsHeading').on('click', function() {

       $(".productsBody").hide();
       $(".aboutUsBody").show();

   });
}

I can get around the .hide() and .show() using ng-hide="productsBody" and ng-hide="aboutUsBody" within my DIVs.. These are handled through a ng-click="productsheading()".. However, the issue i am facing is, how do i handle the:

if ($(window).width() < 700) {

In AngularJS? I am using AngularJS v1.1.5

解决方案

In AngularJS if you want to do changes in HTML or DOM manipulation then recommended or best practices is to use the directive for the same.

Write a directive may be below links are helpful:

AngularJS event on window innerWidth size change

http://jsfiddle.net/jaredwilli/SfJ8c/

HTML for the Directive

<div ng-app="miniapp" ng-controller="AppController" ng-style="style()" resize>window.height: {{windowHeight}}
    <br />window.width: {{windowWidth}}
    <br />
</div>

Javascript Code for the Directive

    app.directive('resize', function ($window) {
    return function (scope, element) {
        var w = angular.element($window);
        scope.getWindowDimensions = function () {
            return {
                'h': w.height(),
                'w': w.width()
            };
        };
        scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
            scope.windowHeight = newValue.h;
            scope.windowWidth = newValue.w;

            scope.style = function () {
                return {
                    'height': (newValue.h - 100) + 'px',
                        'width': (newValue.w - 100) + 'px'
                };
            };

        }, true);

        w.bind('resize', function () {
            scope.$apply();
        });
    }
})

这篇关于angularjs if/else 语句和窗口宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！