Question

我正在努力使用Ionic开发移动应用程序。

首先了解我想要实现的目标。

我正在编写一个具有挑战性的设计。我正在放置一个固定高度的图像，在一个具有灵活高度的div的右下角。然后div中的文本需要环绕图像。

事物的HTML和CSS方面

我有CSS和HTML怀疑（至少我认为！）。 HTML是：

    //this line is in the head
    <style ng-bind-html="myStyles"></style>

    //the rest is in the body of the HTML 
    <div class="score_block">
        <div class="description">
            <div class="image_container">
                <img src="img/emotional_man.png">  
            </div>            
            <p>{{area.levelling.description}}</p>
            <div class="habits_button">
                <button ng-click="$state.go('app.planner')" class="button button-stable button-icon button-block">Plan habits</button>
            </div>
        </div>
    </div>

CSS（使用SASS编写）是这样的：

.score_block {
    text-align: center;
    position: relative; 
    .description {
        text-align: left;
        margin: 10px 0;
    }
    .image_container {
        clear: both;
        float: right;
        width: 100px;
        height: 100px;
        img {
            height: 100px;
            width: 100px;
        }
    }
}
.score_block:before {
    content: "";
    float: right;
    height: 200px;
    width: 0;
}

如果我改变'score_block：before'课程的高度，我可以重新定位我需要的图像。

到目前为止的Javascript

所以在Javascript方面，我希望如果我能计算出.description div的高度，我可以从中减去图像的高度并告诉CSS如何定位图像。我需要一些AngularJS才能做到这一点 - 我认为这就是我所需要的，因为据我所知，JQuery在Ionic中不起作用。

到目前为止，我有JS代码执行此操作：

.controller('emotionalCtrl', function ($scope, $state, AreasService, _) {
    //these commented out lines are to show things I have tried but don't work
    //var blockH = $(".description").height();
    //var descriptionHeight = angular.element('description');
    //var number = descriptionHeight('offsetHeight');

    var number = 0;
    $scope.myStyles = "#habit_area_homepage .score_block:before { height:" + number + "px; }";
    })

我正在考虑对变量 number 进行计算并将其传回去。我可以手动更改 number 的值，因为我知道其他一切都很好。我已经阅读了一些关于做指令的事情，但我见过的所有例子都让我感到困惑。也许我需要在这里放一个指令或者某些东西来帮助我获得.description元素的高度，但我无法想出这样做。我已经花了将近两天的时间了！

我对AngularJS和Ionic都很陌生，所以任何帮助都会非常感激。谢谢！

Answer 1

有多种方法可以完成动态样式。

根据您提供的代码。我建议你添加样式。

在控制器中运行以下代码或“运行”：

 angular.module("app",[]).run(function(){
   var stylesTpl="<style>#habit_area_homepage .score_block:before { height:" + number + "px; } </style>"; 
   angular.element(document).find("head").append(stylesTpl);
 })

检查此帖子是否有内置的angular指令以实现动态样式：

How do I conditionally apply CSS styles in AngularJS?

如果你想获得特定div的高度，你有两种方法：

为div分配ID，然后使用

var element = document.getElementById("id");
console.log(element.offsetHeight);

使用querySelectors，它返回第一个也是唯一一个元素：

var element = document.querySelector(".description");
console.log(element.offsetHeight);

使用指令也是一种好方法，请检查：

Get HTML Element Height without JQuery in AngularJS

如何在离子中获得div的高度

1 个答案: