Angular way of getting and setting an elements height

Question

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

score 6 · Accepted Answer · answered Nov 05 '14 at 10:33

6

First of all you shouldn't use angular like jQuery. One of ideas in angular - that you could build some components 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.

answered Nov 05 '14 at 10:33

Artemis

4,821
3
21
24

1

Shouldn't it be `
`? I'm struggling to apply this to my example...
– myol Nov 05 '14 at 10:47
1

no. in angular we have convention translating camel case to dash-ed style. – Artemis Nov 05 '14 at 10:56
Ok, so I changed it to dash-ed style, but still nothing gets applied to the element with `fix-height`... – myol Nov 05 '14 at 11:02
Also try to place defugger inside directive and play around with element. – Artemis Nov 05 '14 at 11:06
Ok found it. The element I wish to make bigger is outside the ng-App element, so the directive never triggers. I can change the element with `fix-height` but then how can I use the height found from this element, and then apply that height to an element outside of the ng-App element? – myol Nov 05 '14 at 11:21
Honestly it looks strange... You can't modify things with angular outside of angular app. ng-App is root of your application. – Artemis Nov 05 '14 at 12:19

Angular way of getting and setting an elements height

1 Answers1