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

问题描述

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

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

   });
}

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

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

在AngularJS中?我正在使用AngularJS v1.1.5

In AngularJS? I am using AngularJS v1.1.5

推荐答案

在AngularJS中，如果要更改HTML或DOM操作，则建议或最佳做法是对该指令使用该指令.

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事件innerWidth大小更改

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

该指令的HTML

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

该指令的Javascript代码

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屋！