29

AngularJS カスタム ディレクティブを初めて試しています。

ディレクティブのリンク関数で分離スコープを使用 (または理解) するのに問題があります。

これが私のアプリのこの部分のコードです:

view.html

...
<raw-data id="request-data" title="XML of the request" data="request">See the request</raw-data>
...

requestリクエストの xml-string を含む viewCtrl のスコープで発行される変数です。

rawData.js

directives.directive('rawData', function() {

    return {
        restrict : 'E',
        templateUrl : 'partials/directives/raw-data.html',
        replace : true,
        transclude : true,
        scope : {
            id : '@',
            title : '@',
            data : '='
        },
        link : function($scope, $elem, $attr) {
            console.log($scope.data); //the data is correclty printed
            console.log($scope.id); //undefined
        }
    };
});

raw-data.html

<div>
    <!-- Button to trigger modal -->
    <a href="#{{id}}Modal" role="button" class="btn" data-toggle="modal" ng-transclude></a>

    <!-- Modal -->
    <div id="{{id}}Modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="{{id}}Modal" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">{{ title }}</h3>
        </div>
        <div class="modal-body">
            <textarea class="input-block-level" rows="10">{{ data }}</textarea>
        </div>
        <div class="modal-footer">
            <!-- <button class="btn" ng-click="toggleTagText('')">{{'cacher'}} l'image</button> -->
            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Fermer</button>
        </div>
    </div>
</div>

モーダルがポップしたときにIDが正しく表示される理由がわかりませんが、試してみるconsole.log()と、その値は未定義です。

多分私は分離されたスコープの値（=および@）に間違っています。

読んでくれてありがとう。:)

4

4 に答える 4

36

でバインドされた Isolate スコープ プロパティ@は、リンク関数ですぐには使用できません。使用する必要があります$observe：

$attr.$observe('id', function(value) {
   console.log(value);
});

Angular が isolate スコープ プロパティidを自動的に更新するため、テンプレートは適切に機能します。テンプレートが更新されると、テンプレートも自動的に更新されます。

文字列を渡すだけの場合は、@バインディングを使用する代わりに、値を一度だけ評価できます。

link: function($scope, $elem, $attr) {
    var id    = $attr.id;
    var title = $attr.title
    console.log(id, title);
}

ただし、あなたの場合、テンプレートでプロパティを使用したいので、を使用する必要があります@。

テンプレートを使用していない場合@、属性値に が含まれている場合に便利{{}}ですtitle="{{myTitle}}"。次に、使用する必要性がより明確になります。リンク関数は、値が変化する$observeたびに何かをしたい場合があります。myTitle

于 2013-06-14T15:13:09.123 に答える
10

これは意図的なもので、コンパイルの順序と「@」と「=」の違いに関係しています。

Misko からの入力を含む、この Google グループのディスカッションからの抜粋:

@ と = は非常に異なることを行います。1 つは属性値 (補間される可能性があります) をコピーし、もう 1 つは属性値を式として扱います。

@attrs は後になるまで $interpolated されないため、リンク時には利用できません。リンク関数でそれらを使って何かをしたい場合は、手動で $interpolate する必要があります

于 2013-06-14T15:14:16.417 に答える
0

さて、上記の回答のどれも実際には1つの重要な側面に言及していません.「=」を使用しても、次のようにリンク関数内のスコープに直接アクセスできないようです.

scope: {
    data: '=',
},
link: function(scope, elem, attrs) {
    console.debug(scope.data); // undefined

内部関数でスコープにアクセスできますが、

link: function(scope, elem, attrs) {
    scope.saveComment = function() {
        console.debug(scope.data);

そのため、scope.data が利用可能になるまでにタイムラグがあるように思えます。

于 2014-12-28T18:04:37.327 に答える
0

ここで私が作成した JSFiddle にアクセスできます: http://jsfiddle.net/7t984sf9/5/ :

link: function($scope, $elem, $attr) {
    console.log($scope.onewayObject);
    $attr.$observe('onewayObject', function(value) {
         console.log(value);
    });
}

または、ここでより詳細な説明: What is the difference between & vs @ and = in angularJS

于 2014-12-31T00:57:34.363 に答える