5

次のようなディレクティブがあるとしましょう。

directive('attachment', function() {
    return {
        restrict: 'E',
        controller: 'AttachmentCtrl'
    }
})

つまり、次のような「添付ファイル」要素のリストを作成できます。

<attachment ng-repeat="a in note.getAttachments()">
    <p>Attachment ID: {{a.id}}</p>
</attachment>

note.getAttachments()上記のスニペットで、が単純なjavascriptオブジェクトハッシュのセットを返すと仮定しましょう。

ディレクティブのコントローラーを設定したので、そのコントローラーのスコープ関数への呼び出しをインラインで含めることができます。

コントローラは次のとおりです。

function AttachmentCtrl($scope) {
    $scope.getFilename = function() {
        return 'image.jpg';
    }
}

そして、その関数の呼び出しをインラインで含める場合の変更されたHTMLは次のとおりです$scope.getFilename（新しい2番目の段落）。

<attachment ng-repeat="a in note.getAttachments()">
    <p>Attachment ID: {{a.id}}</p>
    <p>Attachment file name: {{getFilename()}}
</attachment>

ただし、これは役に立ちません。これにより、各添付ファイルのファイル名と同じ文字列「image.jpg」が出力されます。

実際には、添付ファイルのファイル名は添付ファイルIDに基づいています。したがって、IDが「2」の添付ファイルのファイル名は「image-2.jpg」になります。

したがって、getFilename関数を変更する必要があります。それを修正しましょう：

function AttachmentCtrl($scope) {
    $scope.getFilename = function() {
        return 'image-' + a.id + '.jpg';
    }
}

しかし、待ってください—これは機能しません。スコープに変数はありませんa。aのおかげで変数をインラインで使用できますng-repeatが、そのa変数はディレクティブにバインドされたスコープでは使用できません。

だから問題は、どうすればそれをaスコープで利用できるようにするのかということです。

注意：この特定の例では、image-{{a.id}}.jpgインラインで印刷できることに気づきました。しかし、それは質問に答えません。これは非常に単純化された例です。実際には、getFilename関数は複雑すぎてインラインで印刷できません。

編集：はい、getFilename引数を受け入れることができます、そしてそれはうまくいくでしょう。しかし、それも質問に答えません。a回避策なしで、インラインで使用せずにスコープに入ることができるかどうかを知りたいです。

たとえば、コントローラーに直接注入して、次のように記述する方法があるかもしれません。

function AttachmentCtrl($scope, a) { ... }

しかし、どこからそれを渡すのでしょうか？ディレクティブ宣言に追加できるものはありますか？たぶん、ng-repeatの隣に追加できるng- *属性ですか？可能かどうか知りたいだけです。

4

3 に答える 3

2

しかし、待ってください—これは機能しません。スコープに変数「a」はありません。ng-repeatのおかげで変数をインラインで使用できますが、ディレクティブにバインドされたスコープで変数を使用することはできません。

実際には、変数aはディレクティブコントローラーに関連付けられたスコープ内にあります。ディレクティブによって作成された各コントローラーは、ng-repeatの反復によって作成された子スコープを取得します。したがって、これは機能します（$ scope .a.idに注意してください）：

function AttachmentCtrl($scope) {
    $scope.getFilename = function() {
        return 'image-' + $scope.a.id + '.jpg';
}

これは、コントローラースコープ、ディレクティブスコープ、およびngRepeatスコープを示すフィドルです。

「同じ要素上の複数のディレクティブが新しい​​スコープを要求する場合、1つの新しいスコープのみが作成されます。」-ディレクティブドキュメント、セクション「ディレクティブ定義オブジェクト」

この例では、ng-repeatが新しいスコープを作成しているため、同じ要素のすべてのディレクティブが同じ新しい（子）スコープを取得します。

また、変数をコントローラーに取り込む必要がある場合は、ng-initを使用するよりも属性を使用する方が適切です。

于 2013-01-22T03:48:54.097 に答える
2

もう1つの方法はng-init、子スコープのモデルプロパティを使用して設定することです。このフィドルを見る

関連するコードは

<div ng-app='myApp' ng-controller='MyCtrl'>
    <attachment ng-repeat="a in attachments" ng-init='model=a'>
        <p>Attachment ID: {{model.id}}</p>
        <p>Attachment file name: {{getFilename()}}</p>
    </attachment>
</div>

と

function AttachmentCtrl($scope) {
    $scope.getFilename = function () {
        return 'image-' + $scope.model.id + '.jpg';
    }
}
于 2013-01-20T06:56:18.977 に答える
0

関数に渡すだけです。

意見：

<attachment ng-repeat="a in note.getAttachments()">
    <p>Attachment ID: {{ a.id }}</p>
    <p>Attachment file name: {{ getFilename(a) }}
</attachment>

コントローラー：

function AttachmentCtrl ($scope) {
    $scope.getFilename = function (a) {
        return 'image-' + a.id + '.jpg';
    }
}
于 2013-01-20T06:37:02.690 に答える