javascript - Angular way of getting and setting an elements height - Stack Overflow

admin管理员组

文章数量:1394743

I looked at this thread on the Angular way of getting an elements height, but as an angular newbie, I need a little help converting my own js to proper angular.

app.js

var AppModule = angular.module('App', ['ngAnimate', 'ngRoute']);

AppModule.config(function($routeProvider) {
    $routeProvider

        .when('/page:pageNumber', {
            templateUrl: function ($routeParams) {
                return '/app/..../assets/html/page' + $routeParams.pageNumber + '.php';
            },
            controller: "PageCtrl"
        })
        .otherwise({
            redirectTo: "/page1"
        });
});

controller.js

AppModule.controller("ViewCtrl", function($scope, $timeout) {
    $scope.$on("$routeChangeSuccess", function(event, current, previous) {

        $timeout(function() {       
            $scope.animationStyle = "slideRight";
            height = document.getElementById('page' + $routeParams.pageNumber).offsetHeight;

            document.getElementById('document').setAttribute("style","height:" + height + "px");
            document.getElementById('document').style.height='"' + height + 'px"';
        });
    });
});

Firstly, I don't know how to call $routeParams to get pagenumber. I tried injecting $routeProvider into the controller but this didn't help. It doesn't seem to be in $scope either.

Secondly, I don't know if I should put the code for DOM manipulation in the controller. I just stuck it there to try and get it working (which it does for one page if I substitute height = document.getElementById('page' + $routeParams.pageNumber) with height = document.getElementById('page2')

I looked at this thread on the Angular way of getting an elements height, but as an angular newbie, I need a little help converting my own js to proper angular.

app.js

var AppModule = angular.module('App', ['ngAnimate', 'ngRoute']);

AppModule.config(function($routeProvider) {
    $routeProvider

        .when('/page:pageNumber', {
            templateUrl: function ($routeParams) {
                return '/app/..../assets/html/page' + $routeParams.pageNumber + '.php';
            },
            controller: "PageCtrl"
        })
        .otherwise({
            redirectTo: "/page1"
        });
});

controller.js

AppModule.controller("ViewCtrl", function($scope, $timeout) {
    $scope.$on("$routeChangeSuccess", function(event, current, previous) {

        $timeout(function() {       
            $scope.animationStyle = "slideRight";
            height = document.getElementById('page' + $routeParams.pageNumber).offsetHeight;

            document.getElementById('document').setAttribute("style","height:" + height + "px");
            document.getElementById('document').style.height='"' + height + 'px"';
        });
    });
});

Firstly, I don't know how to call $routeParams to get pagenumber. I tried injecting $routeProvider into the controller but this didn't help. It doesn't seem to be in $scope either.

Secondly, I don't know if I should put the code for DOM manipulation in the controller. I just stuck it there to try and get it working (which it does for one page if I substitute height = document.getElementById('page' + $routeParams.pageNumber) with height = document.getElementById('page2')

• javascript
• angularjs

Share Improve this question Follow edited May 23, 2017 at 11:46 CommunityBot 111 silver badge asked Nov 5, 2014 at 10:19 myolmyol 10k2424 gold badges9797 silver badges158158 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

First of all you shouldn't use angular like jQuery. One of ideas in angular - that you could build some ponents or mixins (directives) that could be managed by contollers and services that contain some logic.

In your case you are trying to change DOM in controller, but you really don't want to do it. I would suggest to build some mixin directive that would apply to element you want to measure (or change) and write something like this.

var yourModule = angular.module('yourModule',[]);
yourModule.directive('fixHeight',function(){
    return {
        link: function(scope,element,attr){
            //here you should be aware of possibility to 
            //use jqLite to set or get your height like in jquery

            var getHeight = element.css('height');
            element.css('height',100500); // set height
        }
    }
});

So you could apply this directive to some element and than it will change your height.

<div class="someClass" fix-height>
</div>

You can actually pass data to directive by scope, or isolated scope. But for these topic I would advice to look some tutorials for deep understanding.

本文标签： javascriptAngular way of getting and setting an elements heightStack Overflow