Question

我在Angular方式上查看this线程获取元素高度，但作为角度新手，我需要一些帮助将我自己的js转换为正确的角度。

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

首先，我不知道如何致电$routeParams来获取pagenumber。我尝试将$routeProvider注入控制器，但这没有帮助。它似乎也不在$scope中。

其次，我不知道是否应该在控制器中放置DOM操作的代码。我只是坚持在那里尝试让它工作（如果我用height = document.getElementById('page' + $routeParams.pageNumber)替换height = document.getElementById('page2')

，那么它会用于一页

Answer 1

首先你不应该像jQuery一样使用angular。 angular中的一个想法 - 你可以构建一些组件或mixins（指令），这些组件或mixins可以由包含某些逻辑的控制器和服务来管理。

在你的情况下，你试图在控制器中更改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>

您实际上可以按范围或隔离范围将数据传递给指令。但是对于这些话题，我建议你看一些深入理解的教程。

获取和设置元素高度的角度方式

1 个答案: