0

Angular Typescript を理解するのに別の問題があります。今回は、コントローラーを使用したディレクティブについて説明します。オブジェクトをページからディレクティブに渡してから、そのオブジェクトをディレクティブのコントローラーで使用しようとしています。これは正しいアプローチではないかもしれませんが、私には理にかなっているようです。コントローラー内のオブジェクトにアクセスする方法がわかりません。

ページからの HTML:

<div>
    <section>
        On View: {{ee.obj.name}}
        <image-upload obj="ee.obj"></image-upload>
    </section>
</div>

ディレクティブ テンプレート:

<div>
    On directive: {{obj.name}}
    On controller: {{iuc.obj.name}}
    <div class="row">
        <div class="col-md-4 text-primary h4">
            Add Images
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <input type="file" multiple ng-model="iuc.imageUploads" ng-change="iuc.uploadImages()" />
        </div>
    </div>
    <div class="row">
        <div class="col-md-3 dropzone"></div>
    </div>
</div>

ディレクティブ typescript:

/// <reference path="../../../scripts/_all.ts" />

module ObjConfig {
    'use strict'

    export class ImageUpload implements ng.IDirective {
        static instance(): ng.IDirective {
            return new ImageUpload();
        }
        restrict = 'E';
        replace = true;
        templateUrl = '../../../../App/AppConfig/Views/Directives/ImageUpload.html';
        scope = {
            obj: '='
        };
        controller = imageUploadCtrl;
        controllerAs = 'iuc';
    }

    export class imageUploadCtrl {
        obj: OBJBase;
        imageUploads: OBJImage[];

        constructor() {
        }

        uploadImages() {
            //THIS IS WHERE I WANT TO ACCESS OBJ 
            //this.imageUploads.forEach((iu) => { this.obj.images.push(iu); });
        }
    }

    angular.module('ObjConfig').directive('imageUpload', ImageUpload.instance);
}

メソッドで「this.obj」を使用すると、未定義として返されるため、明らかにコントローラー「obj」はディレクティブ「obj」に自動的に接続されません。ページの ee.obj.name は値を示し、ディレクティブ テンプレートの上部にある obj.name は値を示しますが、iuc.obj.name は値を示しません。そのため、ディレクティブ obj をコントローラー obj にリンクする方法を見つけようとしており、リンク関数を使用して ng.IAttributes を使用しようとしましたが、オブジェクトが得られません。それは私に ee.obj を与えます。

どんな助けでも大歓迎です。

4

1 に答える 1