Angular way to get and set the height of elements

I looked at this Angular thread to get the height of the elements, but as a newbie to Angular, I need a little help converting my own js to the correct 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 do not know how to call $routeParamsto receive pagenumber. I tried to enter $routeProviderinto the controller, but that did not help. He doesn't seem to be in $scope.

Secondly, I don’t know if I should put the code for DOM manipulation in the controller. I just got stuck there to try to get it to work (what does it do for one page if I replace height = document.getElementById('page' + $routeParams.pageNumber)withheight = document.getElementById('page2')

+4
source share
1

angular jQuery. angular - (), , .

DOM , . mixin, , ( ), - .

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

, .

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

. .

+6

All Articles