0

カメラ (Phonegap) でいくつかの写真をキャプチャし、画像/URL を配列に保存します。画像を表示するには、次のようなものを追加したいと思います（画像は表に表示されます）：

<!-- language: lang-html -->
<div class='ui-block-b'><img src=" + value + "></div>";

だから私はこれのためのディレクティブが必要であることを知っています。私の問題は、新しい画像/アイテムが配列に追加されて表示できるようになったときにどのように反応するかを理解することです。

配列を監視する必要がありますか?

<!-- language: lang-js -->
angular.module('mydirectives').directive("ngImage", function ($compile) {
    return {
        template: "<div class='ui-block-b'><img src=" + {{images.image}} + "></div>",
        scope: {
        images:'='
    }
        link: function (scope, elm) {           
        scope.$watch(images, function (value) {

            // ??????
        });
        }
    };
    });
4

1 に答える 1

1

指令書は必要ですか？組み込みのディレクティブでそれを行うことができます：

<div data-ng-repeat="item in images" class="ui-block-b"><img data-ng-src="item.image"></div>

ngRepeat は画像を監視します。images.push({image: 'newUrl', imageType: 'A'}) するだけです。さらに、条件付きでクラスを追加するだけの場合は、次のようにすることができます。 

<div data-ng-repeat="item in images" data-ng-class="{'ui-block-b': item.imageType == 'B', 'ui-block-a': item.imageType == 'A'}"><img data-ng-src="item".image></div>

それでも独自のディレクティブでそれを行いたい場合は、コレクション $scope.$watchCollection を監視する必要がありますが、これはおそらく少し複雑です。コレクションの length プロパティだけを監視することもできます。

于 2013-06-18T21:33:54.253 に答える