0

AngularJS 1.0.8 を使用して、いくつかの再利用可能なディレクティブを作成して、Web 開発者が多数の属性を持つ単一の「トップレベル」ディレクティブをコーディングできる状況を作成しようとしています。このディレクティブには、次を含むテンプレートがあります。他のディレクティブ、それ自体が他のディレクティブなどを含む場合があります。

私が抱えている問題は、「内部」テンプレートにトップレベルの属性を認識させることです。これは普遍的な問題だと思いましたが、私の調査によると、他の誰かがこれを尋ねているようには見えませんでした。

問題を示すために、このプランカーを作成しました。

<!DOCTYPE html>
<html ng-app="outerInnerDirectivesApp">
<head>
    <title>Outer/Inner Directives</title>
</head>
<body>
<div>Single level directive follows:</div>
<single-level-directive single-level-id="single123"></single-level-directive>
<div>Outer/inner directive follows (Expecting "outer123"):</div>
<outer-directive outer-id="outer123"></outer-directive>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="app.js"></script>
<script src="directives.js"></script>
</body>
</html>

プランカーでは、

  1. single-level-directive は機能し、データを表示する標準的な方法だと思います。

  2. 外部ディレクティブと内部ディレクティブが機能していません。

私がこれらで起こると思っていたのは

(i) outerDirective は、html を生成するためにコンパイル/リンクします。

<inner-directive inner-id="outer123"></inner-directive>

その後

(ii) innerDirective は html を生成するためにコンパイル/リンクします。

<div>outer123</div>

しかし、ステップ（ii）で私は得る

<inner-directive inner-id="" class="ng-isolate-scope ng-scope">
   <div class="ng-binding"></div>
</inner-directive>

したがって、innerDirective によって空の div が生成されます。

実際、outer-template.html を次のように変更すると、

<div>{{outerId}}<div>

その後、値が正しく表示されるため、正しい時点で scope.outerId が利用可能であるように見えますが、Angular は私がこの方法でそれを使用しようとしていることに満足していません。

これは、Angular が行うことを期待するのに合理的なことですか? もしそうなら、私は何が欠けていますか? そうでない場合、単純な一連のディレクティブからより複雑な画面を構築するための賢明な代替方法は何だと思いますか?

4

2 に答える 2

1

分離スコープでディレクティブを設計する場合は、分離スコープを使用して、使用する属性のタイプを定義することをお勧めします。

outerInnerApp.directive("outerDirective", function() {
  return {
    restrict: "E",
    scope: {
      outerId: '@'
    },
    link: function(scope, element, attrs) {

    },
    templateUrl: "outer-template.html"
  };
});
outerInnerApp.directive("innerDirective", function() {
  return {
    restrict: "E",
    scope: {
      innerId: '='
    },
    link: function(scope, element, attrs) {

    },
    templateUrl: "inner-template.html"
  };
});

これが動作中の plunkerです。

外部ディレクティブは、属性で定義されている値を使用しています。したがって、値を分離スコープに渡すには、 を使用できます@。内部スコープは変数をバインドしています。したがって、=バインドされた属性を設定するために使用できます。

于 2013-10-31T21:03:23.710 に答える
0

これについてさらにいくつかの考えがありました。AngularJS をもう少し使用したので、(「=」を使用して) スコープにバインドする必要があるかどうかわかりません。実際、以下の変更を加えることで元の Plunkr を動作させることができます。

outerInnerApp.directive("outerDirective", function() {
    return {
        restrict: "E",
        scope: {
        //add outerId here
        outerId: "@"
        },
    link: function(scope, element, attrs) {
        //remove scope assignment here
        //scope.outerId = attrs.outerId;
    },
    templateUrl: "outer-template.html"
    };
});
outerInnerApp.directive("innerDirective", function() {
    return {
    restrict: "E",
    scope: {
        //add innerId here
        innerId: "@"
    },
    link: function(scope, element, attrs) {
        //remove scope assignment here
        //scope.innerId = attrs.innerId;
    },
    templateUrl: "inner-template.html"
    };
});

現時点で理解できないのは、たとえば、 

innerId:"@"

リンク関数でスコープの値を設定する

link: function(scope, element, attrs) {
    scope.innerId = attrs.innerId;
}

動作が異なる理由がわかったら、返信します。

于 2013-12-13T23:13:47.223 に答える