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

1 Answer 1

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.