Question

我正在通过ng-repeat渲染一些对象范围。

HTML

<tr ng-repeat="product in products">
    <td><img ng-src="{{product.img_thumb}}" ng-model="product.imgSize" img-dimensions-bind-directive></td>
</tr>

如何获取图像clientWidth和clientHeight并将其放在ng-repeat中的对象product.imgSize中？

img-dimensions-bind-directuve应该是什么？

目前我有：

app.directive('imgDimensionsBindDirective', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            element.bind('load', function() {
                ngModel.$setViewValue(element[0].clientWidth);
                // but how bind height ??
                // element[0].clientHeight
            });
        }
    }
});

在输出时，每个product必须有imgSize.width和imgSize.height参数。

或者可以使用onload功能吗？

请帮忙。

Answer 1

如何直接绑定到产品对象而无需任何其他ngModel。像这样：

app.directive('imgDimensionsBindDirective', function() {
    return {
        restrict: 'A',
        scope: {
            product: '=imgDimensionsBindDirective'
        },
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                scope.product.imgSize = {
                    width: element[0].clientWidth,
                    height: element[0].clientHeight
                };
                scope.$apply();
            });
        }
    }
});

和HTML然后：

<tr ng-repeat="product in products">
    <td><img ng-src="{{product.img_thumb}}" img-dimensions-bind-directive="product"></td>
</tr>

演示：http://plnkr.co/edit/8xGZ8LrKL6NB22ZX8Mpz?p=preview

Answer 2

您可以将尺寸编码为json字符串。

<HorizontalScrollView
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:id="@+id/horizontalScrollView"
    android:layout_above="@+id/btn_minus_linie"
    android:layout_centerHorizontal="true"
    android:fillViewport="true">
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="center"
    android:gravity = "center"
    android:orientation="horizontal"
    android:weightSum="5">

    <Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="*"
    android:id="@+id/buton_ori"
    android:onClick="Ori"
    android:layout_weight="1"
    android:layout_alignParentLeft="true" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="+"
        android:id="@+id/buton_plus"
        android:onClick="Plus"
        android:layout_weight = "1"/>

    <Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="-"
    android:id="@+id/buton_minus"
    android:onClick="Minus"
    android:layout_weight = "1"
    />
<Button
    android:textAllCaps="false"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="det"
    android:id="@+id/buton_det"
    android:onClick="Det"
    android:layout_weight = "1"
    />
<Button
    android:textAllCaps="false"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Inv"
    android:id="@+id/buton_inv"
    android:onClick="Inv"
    android:layout_weight = "1" />
</LinearLayout>

在ng-repeat中获取图像尺寸并将其放入ng-repeat项目| AngularJS

2 个答案: