5

スコープが更新されても、ディレクティブの属性は変更されず、初期値のままです。ここで何が欠けていますか？

HTML

<ul class="nav nav-pills nav-stacked" navlist>
    <navelem href="#!/notworking/{{foo}}"></navelem>
    <navelem href="#!/working">works great</navelem>
</ul>

<p>works: {{foo}}</p>

Javascript (フロントページの角度付きタブの例に基づく)

angular.module('myApp.directives', []).
directive('navlist', function() {
    return {
        scope: {},
        controller: function ($scope) {
            var panes = $scope.panes = [];

            this.select = function(pane) {
                angular.forEach(panes, function(pane) {
                    pane.selected = false;
                });
                pane.selected = true;
            }

            this.addPane = function(pane) {
                if (panes.length == 0)
                    this.select(pane);
                panes.push(pane);
            }

        }
    }
}).
directive('navelem', function() {
    return {
        require: '^navlist',
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: { href: '@href' },
        link: function(scope, element, attrs, tabsCtrl) {
            tabsCtrl.addPane(scope);
            scope.select = tabsCtrl.select;
        },
        template:
            '<li ng-class="{active: selected}" ng-click="select(this)"><a href="{{href}}" ng-transclude></a></li>'
    };
});
4

3 に答える 3

8

scope: {}ディレクティブで定義することにより、を作成しisolated scopeます。そのため、親スコープはディレクティブからは見えなくなります。

親スコープを参照する場合は、scope: true（同じディレクティブの中で）共有スコープを指定し、通常のスコープのネストのためにスコープ宣言を省略できます。または$scope.foo、親を参照するだけの場合は、子ディレクティブで行ったように明示的なスコープ変数を定義できます。

于 2012-09-19T23:28:49.363 に答える
8

ディレクティブ スコープの継承には、次の 3 つのタイプがあります。

  1. 「スコープ: ...」または明示的scope: falseなし - 新しいスコープは作成されません。ディレクティブは、親と同じスコープを使用します。これはシンプルで便利ですが、再利用可能なコンポーネントを作成する場合はお勧めできません。ディレクティブが使用/アクセスする必要がある特定のスコープ プロパティが親スコープに定義されている場合にのみ、ディレクティブを使用できる可能性が高いからです。
  2. scope: true- 親スコープの通常のプロトタイプ継承を使用して、同じ要素のすべてのディレクティブによって共有される新しいスコープを作成します。ディレクティブはおそらく親スコープのプロパティにアクセスできないため、再利用可能なコンポーネントにはおそらく最適な選択ではありません。誤って親の何かを変更する可能性があります。
  3. scope: { ... }- 新しい「分離された」スコープを作成します -- 親スコープから原型的に継承しません。ただし、オブジェクト ハッシュ (つまり { ... } ) を使用すると、親スコープから派生したローカル ディレクティブ スコープ プロパティを定義できます。そのため、どのプロパティをどのように共有するかを制御できます。
    1. 親スコープ プロパティとディレクティブ スコープ プロパティの間の強力な双方向バインディングには、'=' を使用します。いずれかのスコープ プロパティへの変更は、もう一方のスコープ プロパティに影響します。
    2. 親の属性値をディレクティブ スコープ プロパティにバインドするには、'@' を使用します。これは基本的に一方向バインディングです。親スコープの変更のみがディレクティブ スコープに影響します。
    3. 親スコープの式/関数にバインドするには、「&」を使用します。

特定の問題については、オブジェクト ハッシュで、どのスコープ プロパティを双方向バインディングにするかを指定する必要があります。

ディレクティブ スコープ (画像を含む) の詳細については、こちらのセクションディレクティブを参照してください: AngularJS におけるスコープ プロトタイプ/プロトタイプ継承のニュアンスは何ですか?

于 2012-12-01T05:00:35.470 に答える